Checkbox check/checkcheck jQuery

Каким образом можно установить/снять флажок, который помещается внутри элемента, который запускает мою функцию?

Здесь мой код:

<table id="news_list">
<tr>
    <td><input type="checkbox" name="news[1]" /></td>
    <td>TEXT</td>
</tr></table>

$("#news_list tr").click(function() {
    var ele = $(this).find('input');
    if(ele.is(':checked')){
        ele.removeAttr('checked');
        $(this).removeClass('admin_checked');
    }else{
        ele.attr('checked', 'checked');
        $(this).addClass('admin_checked');
    }
});

Проблема в том, что я могу проверять и снимать каждую ячейку только один раз. После того, как я проверил и снял флажок, он по-прежнему добавляет/удаляет класс, но никогда не проверяет поле снова (даже когда я нажимаю на флажок, а не на строку таблицы).

Я попытался использовать триггер .bind('click'), но это тот же результат.

Любые решения?

Ответы

Ответ 1

Используйте .prop() вместо этого, и если мы перейдем к вашему коду, сравните вот так:

Посмотрите на пример jsbin:

  $("#news_list tr").click(function () {
    var ele = $(this).find(':checkbox');
    if ($(':checked').length) {
      ele.prop('checked', false);
      $(this).removeClass('admin_checked');
    } else {
      ele.prop('checked', true);
      $(this).addClass('admin_checked');
    }
 });

Изменения:

  • Изменен input на :checkbox.
  • Сравнение the length checked checkboxes.

Ответ 2

Используйте prop() вместо attr(), чтобы установить значение checked. Также используйте :checkbox в методе поиска вместо input и будьте конкретными.

Live Demo

$("#news_list tr").click(function() {
    var ele = $(this).find('input');
    if(ele.is(':checked')){
        ele.prop('checked', false);
        $(this).removeClass('admin_checked');
    }else{
        ele.prop('checked', true);
        $(this).addClass('admin_checked');
    }
});

Используйте prop вместо attr для таких свойств, как checked

Как и в jQuery 1.6, метод .attr() возвращает undefined для атрибутов которые не были установлены. Извлечение и изменение свойств DOM, таких как проверенное, выбранное или отключенное состояние элементов формы, используйте .prop() метод

Ответ 3

 $('mainCheckBox').click(function(){
    if($(this).prop('checked')){
        $('theControledCheckBoxes').prop('checked', true);
    }else{
        $('theControledCheckBoxes').prop('checked', false);
    }
});