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

你不需要循环。您可以在全部选中复选框中添加ID（或按名称选择"input[name='check-all']"），如下所示：

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

通过这个，我选择表格中的所有复选框，但您可以通过从共同的祖先中选择或在您希望的复选框上添加类别或添加特殊属性来限制您的选择器。

如何选择列中的所有复选框？

3 个答案: