如何選擇列中的所有復選框？

Question

有沒有人知道如何通過選中特定列的第一個復選框來選擇（選中）handontable列中的所有復選框。 我嘗試了所有可能的選項來完成它但是我無法以任何方式完成它。

這是代碼，

  function getCarData() {
    return [
      { available: true,available2: true,available3: true, comesInBlack: 'yes'},
      {available: false,available2: true,available3: true,available3: true, comesInBlack: 'yes'},
      { available: true,available2: true,available3: true, comesInBlack: 'no'},
      {available: false,available2: true,available3: true, comesInBlack: 'yes'},
      { available: false,available2: true,available3: true, comesInBlack: 'no'}
    ];
  }

  var example1 = document.getElementById('example1'),
    hot1;

  hot1 = new Handsontable(example1, {
    data: getCarData(),
    colHeaders: ['Available','Available2','Available3'],
    columns: [

      {
        data: 'available',
        type: 'checkbox'
      },{
        data: 'available2',
        type: 'checkbox'
      },{
        data: 'available3',
        type: 'checkbox'
      }
    ]
  });

Answer 1

無論Handsontable如何，您都可以使用document.querySelectorAll（'table input [type =“checkbox”]'）來獲取表中所有復選框的列表。 而不是表輸入[type =“checkbox”]，您可以使用任何CSS選擇器，如字符串。

那么你需要做的是迭代它們並設置checked = true，就像這樣。

var checkboxes = document.querySelectorAll('table tr td input[type="checkbox"]');
for (var i = 0; i < checkboxes.length; i++)
    checkboxes[i].checked = true;

Answer 2

如果你可以使用jquery，這很簡單

<input type="checkbox" id="checkAll">Check All
<hr />
<input type="checkbox" id="checkItem">Item 1
<input type="checkbox" id="checkItem">Item 2
<input type="checkbox" id="checkItem">Item 3

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

Answer 3

你不需要循環。 您可以在check all復選框中添加一個id（或者按名稱選擇它，例如"input[name='check-all']" ），如下所示：

$(document).on("click", "#toggleCheck", function() {
    $("table").find("input[type='checkbox']").prop("checked", "checked");
});

有了這個，我選擇了表格中的所有復選框，但你可以通過選擇一個共同的祖先或在你想要的復選框上添加一個類或者添加一個特殊屬性來限制你的選擇器。