jQuery - переключение, чтобы выбрать все флажки

Question

Сражался с кучей примеров и, будучи еще новичком в jQuery / Javascript, не может заставить мой код работать (здесь мой шаблон в gsp):

<table>
    <thead>
    <tr>
       <th><input type="checkbox" name="selectAll" onclick="selectAll(this.checked);"/></th>
    </tr>
    </thead>
    <tbody>
         <td>
            <td><input type="checkbox" name="domainList" value="${domainInstance.id}"/></td>
    </tbody>
<table>

У меня есть следующий фрагмент JavaScript вмой главный gsp, который вызывает шаблон:

function selectAll(status) {

}

Как мне выбрать все флажки в имени selectAll?

Answer 1

Поскольку вы используете jQuery, вы должны использовать обработчик onclick, как показано ниже для selectAll.

$(':checkbox[name=selectAll]').click (function () {
  $(':checkbox[name=domainList]').prop('checked', this.checked);
});

Обратите внимание, что вышеприведенный код будет искать во всем dom флажок с name=selectAll и установите статус флажка с помощью name=domainList.

Ниже приведена немного лучшая версия с небольшим изменением разметки,

jsFiddle DEMO

$('#selectAllDomainList').click(function() {
  var checkedStatus = this.checked;
  $('#domainTable tbody tr').find('td:first :checkbox').each(function() {
    $(this).prop('checked', checkedStatus);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<table id="domainTable">
  <!-- Added ID -->
  <thead>
    <tr>
      <th>
        <!-- Added ID to below select box -->
        <input type="checkbox" name="selectAll" id="selectAllDomainList" />
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="checkbox" name="domainList" value="${domainInstance.id}" />
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="domainList" value="${domainInstance.id}" />
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="domainList" value="${domainInstance.id}" />
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="domainList" value="${domainInstance.id}" />
      </td>
    </tr>
  </tbody>
  <table>

Answer 2

$("input:checkbox").prop("checked", status);

Answer 3

, чтобы установить все флажки с именем = selectAll и установить их статус, который вы можете сделать

function selectAll(status) {
   $('input[name=selectAll]').each(function(){
      $(this).prop('checked', status);
   });
}