Не убирается значение checked у чекбокса

295

22 апреля 2017, 22:09

Здравствуйте! Есть код

$('.all-checkbox').on('click', function() {
if ( $(this).is(':checked') ) {
    $('.popup-selectes').find('.checkbox').prop('checked', false).trigger('refresh');
} else {
    $('.popup-selectes').find('.checkbox').prop('checked', true).trigger('refresh');
}
});

Подскажите, пожалуйста. Я использую для стилизации плагин FormStyler. Но, думаю, проблема не в нем. Когда я нажимаю на один главный чекбокс, все другие становятся активные. Я делаю проверку, что если главный чекбокс активный, то при клике на него он перестанет быть активным и другие чекбоксы также должны убрать checked. В итоге как раз не работает удаление checked. Вот ссылка. В открытом попапе "Выбрать все"

Спасибо!

Answer 1

1) Перепутали логику в if/else. Должно быть наоборот.

2) У вас чекбокс имеет класс all-checkbox и такой же класс имеет div в котором находится чекбокс, что вызывает двойной клик и путаницу.

$('.all-checkbox').on('click', function() { 
   	if ( $(this).is(':checked') ) { 
   		$('.popup-selectes').find('.checkbox').prop('checked', true).trigger('refresh'); 
   	} else { 
   		$('.popup-selectes').find('.checkbox').prop('checked', false).trigger('refresh'); 
   	} 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="popup-parametrs"> 
      <div class="popup-select-all"> 
        <label class="label"> 
          <div class="checkbox"><input class="checkbox all-checkbox" type="checkbox"></div> 
        </label> 
      </div> 
      <div class="popup-selectes"> 
        <div class="left"> 
          <label class="label"> 
            <div class="checkbox checked"><input class="checkbox" type="checkbox" ></div> 
          </label> 
          <label class="label"> 
            <div class="checkbox checked"><input class="checkbox" type="checkbox" ></div> 
          </label> 
          <label class="label"> 
            <div class="checkbox checked"><input class="checkbox" type="checkbox" ></div> 
          </label> 
          <label class="label"> 
            <div class="checkbox checked"><input class="checkbox" type="checkbox" ></div> 
          </label> 
        </div> 
      </div> 
    </div>