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

【问题标题】：How to select all checkboxes in a column?如何选择列中的所有复选框？
【发布时间】：2017-07-27 08:56:39
【问题描述】：

有谁知道如何通过选中特定列的第一个复选框来选择（选中）handsontable 列中的所有复选框。我尝试了所有可能的选择来完成它，但我无法以任何方式做到这一点。

这是代码，

  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'
      }
    ]
  });

【问题讨论】：

您能否提供 html 并将其放在一些小提琴上...？
请提交您的代码以更好地理解问题

标签： javascript handsontable

【解决方案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;

【讨论】：

@ZekeDroid：你能帮我解决这个问题吗？

【解决方案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);
});

【讨论】：

【解决方案3】：

您不需要循环。您可以像这样在您的检查所有复选框中添加一个 id（或按名称选择它，例如 "input[name='check-all']"）：

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

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

【讨论】：