Правильно сделать универсальное условие по выбору чекбоксов?

Question

[Олег Галимов]

Доброе время суток.
Подскажите как правильно сделать универсальное условие по выбору чекбоксов?
Есть вот такой код.

.checkboxes_on{display:inline-block;width:100%;height:100%;background:#9acd32;}
.checkboxes{display:inline-block;width:100%;height:100%;padding:0;}

$('[name=checkAll],[name=uncheckAll]').click(function(){
			$tld.prop('checked', [false, true][this.value]);
		$('.checkboxes').addClass('checkboxes_on');

	});
		$('[name=uncheckAll]').click(function(){
		$('.checkboxes').removeClass('checkboxes_on');
		$('.checkboxes').addClass('checkboxes');
	})

	$(".checkboxes").each( function( index, element) {
		var id = $(this).find('input').attr( "id");
		$(this).addClass(id);
		
			$('.ru').click(function(){
				if ($('.checkboxes ru, input').is(':checked')) {
						$(this).addClass('checkboxes_on');
						} else {
					$(this).removeClass('checkboxes_on');
				//	$('.checkboxes').css('backgr1ound','none');
				//	$(this).parent().removeClass('checkboxes');
						}
			});
			$('.rf').click(function(){
				if ($('.checkboxes rf, input').is(':checked')) {
					$(this).addClass('checkboxes_on');
						} else {
					$(this).removeClass('checkboxes_on');
				}
			});
			$('.su').click(function(){
				if ($('.checkboxes su, input').is(':checked')) {
					$(this).addClass('checkboxes_on');
						} else {
					$(this).removeClass('checkboxes_on');
				}
			}); //  и так далее всего 23 чекбоксов

Я не могу решить, если чекбоксы отмечены кнопкой [name=checkAll] , то при снятие чекбокса стиль не изменяется почему-то?
вот скриншот
и можно или сделать одну кнопку Выбрать все и снять все, чтоб надписи менялись зависимости от ситуации?

Comments

[Stalker_RED]

var id = $(this).find('input').attr( "id");
    $(this).addClass(id); // омг, что это?

[Stalker_RED]

// и так далее всего 23 чекбоксов

А почему-бы не сделать один обработчик для всех?

[Олег Галимов]

Stalker_RED:

var id = $(this).find('input').attr( "id");
$(this).addClass(id); // омг, что это?

это поиск id в инпутах и вставляет как класс, я не знаю как сделать один обработчик для всех со стилями
Помогите пожалуйста

[Stalker_RED]

Олег Галимов: чаще всего по коду и так можно понять что именно он делает, но непонятно зачем.

К примеру есть фрагмент когда который меняет фон у чекбоксов. в комментариях должно быть написано не "изменяем цвет фона", потому что это и так понятно из кода, а "выделяем выбранные элементы", например. может завтра там не фон будет меняться а рамка добавится или изменится цвет текста, например.

Так и в этом случае - я вижу что id вставляется как класс, но не понимаю смысл этого действия.

Answer 1

[Stalker_RED]

Как-то так? https://jsfiddle.net/Lgo5stbt/

Comments

[Олег Галимов]

а можно чтоб надпись менялась Выбрать на снять? или это не возможно.

[Stalker_RED]

Олег Галимов: можно.

[Олег Галимов]

Stalker_RED:
Я сделал на тестовом сайте old.webvm.ru/domain при клике на кнопку Выбрать все стили срабатывают а чекбоксы не отмечет почему-то?

[Stalker_RED]

Олег Галимов: у кнопки нет свойства "checked"

[Олег Галимов]

Stalker_RED: а как добавить
вот так не работает

$('[name="checkAll"]').on('click', function(){
		$('[name="checkAll"]').prop("checked");
	  var state = this.checked
		$('.table_cell-1 label').each(function(){
		$(this).toggleClass('active', state)
		.find(':checkbox').prop('checked', state)
	  })
	})

[Stalker_RED]

Олег Галимов: Жесть какая. У жирафа нет колес, поэтому давайте их прикрутим, да?
свойство checked есть у checkbox и radio, а у кнопки его нет, и не должно его там быть, и работать оно не будет. обрабатывайте клик, добавьте флаг какой-нибудь.