Check uncheck Все флажки с другим одним флажком используют jquery

Ответ 1

Изменить

$(this).attr("checked", true);

к

$(this).prop("checked", true);

Пример jsFiddle

Я просто ответил на другой вопрос, похожий на этот вопрос. На . Prop() docs:

Метод .prop() - это удобный способ установить значение свойства - особенно при настройке нескольких свойств, используя значения возвращается функцией или задает значения для нескольких элементов в один раз. Он должен использоваться при установке selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked или defaultSelected. поскольку jQuery 1.6, эти свойства больше не могут быть установлены с помощью .attr() метод. Они не имеют соответствующих атрибутов и только свойства.

Свойства обычно влияют на динамическое состояние элемента DOM без изменение сериализованного атрибута HTML. Примеры включают значение свойство входных элементов, отключенное свойство входов и или установленное свойство флажка. Метод .prop() должен использоваться для установки отключенного и отмеченного вместо .attr() метод. Метод .val() должен использоваться для получения и настройки значение.

Ответ 2

Вы должны использовать классы с одинаковым именем, ID ДОЛЖЕН быть уникальным!

<input type="checkbox" name="checkAll" id="checkAll">全選
<input type="checkbox" name="book" class="book" value="book1">book1
<input type="checkbox" name="book" class="book" value="book2">book2
<input type="checkbox" name="book" class="book" value="book3">book3
<input type="checkbox" name="book" class="book" value="book4">book4
<input type="checkbox" name="book" class="book" value="book5">book5</table>

$(function () {
    $("#checkAll").click(function () {
        if ($("#checkAll").is(':checked')) {
            $(".book").prop("checked", true);
        } else {
            $(".book").prop("checked", false);
        }
    });
});

Ответ 3

Поскольку OP требует, чтобы флажки не отмечены все флажки на флажке id=全選.

Решение, приведенное выше @j08691, хорошо, но ему не хватает одной вещи, и это значит, что его решение не отменяет id=全選, если флажок не установлен.

Итак, решение, которое я предложил, это проверить/снять флажки всех флажков на основе id=全選, и если какой-либо другой флажок снят, то флажок id=全選 также должен быть снят. И если пользователь вручную нажмет на все остальные флажки, то флажок id=全選 также должен быть проверен для отражения отношения.

OP, используя один и тот же идентификатор для нескольких флажков, которые противоречат правилам DOM. Идентификаторы элементов должны быть уникальными во всем документе.

Таким образом, следующий код охватывает все аспекты такого сценария.

HTML

<table>
    <tr>
        <td>
        <input type="checkbox" name="checkAll" id="checkAll">全選 (ALL)
        <input type="checkbox" name="book" id="book_1" value="book1">book1
        <input type="checkbox" name="book" id="book_2" value="book2">book2
        <input type="checkbox" name="book" id="book_3" value="book3">book3
        <input type="checkbox" name="book" id="book_4" value="book4">book4
        <input type="checkbox" name="book" id="book_5" value="book5">book5
        </td>
     </tr>
</table>

JQuery

$(document).ready(function() {

    $('#checkAll').click(function () {
        $('input:checkbox').not(this).prop('checked', this.checked);
    });

    $("[id*=book_]").change(function () {
        if ($('input[id*=book_][type=checkbox]:checked').length == $('input[id*=book_][type=checkbox]').length) {
            $('#checkAll').prop('checked', true);
        } else {
            $('#checkAll').prop('checked', false);
        }
    });

});

Описание селектора атрибутов [name * = "value" ]

Выбирает элементы с указанным атрибутом со значением, содержащим заданную подстроку.

Итак $('#checkAll') возвращает мне только родительский флажок, на котором я проверяю/снимаю все флажки.

И $('[id$=book_]') возвращает мне все флажки, кроме флажка parent (全 選). Затем на основе родительского флажка я устанавливаю/снимаю все остальные флажки.

Я также проверяю длину флажков, кроме флажка parent (全 選), если все остальные флажки установлены, тогда я устанавливаю флажок parent (全 選). Таким образом, это способ перекрестно проверить все возможные условия и никогда не пропускает никакого сценария.

Демо-версия JSFiddle здесь

Ответ 4

самый быстрый путь. и сохраните несколько строк

   $(".ulPymnt input[type=checkbox]").each(function(){                
       $(this).prop("checked", !$(this).prop("checked"))                
   })

Ответ 5

С ответом j08691 изучите следующую вещь.

Совершенно бессмысленно создавать селектор типа #id #id, поскольку идентификатор должен быть уникальным в вашей DOM по определению.

<input type="checkbox" name="checkAll" class="checkAll">

$("#tab1 .checkAll").click(function () {

Ответ 6

Добавьте это слишком.... FOR..... если один флажок (id: book) не выбран, означает, что он будет отключен основной флажок (id: checkAll)

$("#tab1 #book").click(function () {
  if($('#book').is(':checked'))
  {
    $("#checkAll").prop("checked", false);        
  }
});

Ответ 7

$("input[name='select_all_photos']").click(function () {
        var checked = $(this).is(':checked');
        $("input[name^='delete_']").each(function () {
            $(this).prop("checked", checked);
        });
    });

Не беспокойтесь о выполнении инструкции if.

Ответ 8

Я просто упростил @j08691 ответ

$("#checkAll").click(function() {
      var allChecked = $(this);
      $("#tab1 input[type=checkbox]").each(function() {
        $(this).prop("checked", allChecked.is(':checked'));
      })
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tab1">
  <tr>
    <td>
      <input type="checkbox" name="checkAll" id="checkAll">Select all
      <input type="checkbox" name="book" id="book" value="book1">book1
      <input type="checkbox" name="book" id="book" value="book2">book2
      <input type="checkbox" name="book" id="book" value="book3">book3
    </td>
  </tr>
</table>

Ответ 9

`change click to ch  $("#checkAll").click(); to $("#checkAll").change();

> Blockquote

$(function () {
 $("#checkAll").change(function () {
  if ($("#checkAll").is(':checked')) {
   $(".book").prop("checked", true);
   } else {
   $(".book").prop("checked", false);
  }
 });
});`