Question

我想使用一个复选框来选中所有复选框或取消选中所有复选框进入可用的列。我使用功能doalert创建一个复选框来控制选中的动作。我正在使用setDataAtCell编辑检查单元格，但没有用。

我的代码是：

document.addEventListener("DOMContentLoaded", function() {

  function getCarData() {
    return [
      {car: "Mercedes A 160", year: 2012, available: true, comesInBlack: 'yes'},
      {car: "Citroen C4 Coupe", year: 2013, available: false, comesInBlack: 'yes'},
      {car: "Audi A4 Avant", year: 2014, available: true, comesInBlack: 'no'},
      {car: "Opel Astra", year: 2015, available: false, comesInBlack: 'yes'},
      {car: "BMW 320i Coupe", year: 2016, available: false, comesInBlack: 'no'}
    ];
  }
  
  var example1 = document.getElementById('example1'),
    hot1;
  
  hot1 = new Handsontable(example1, {
    data: getCarData(),
    colHeaders: ['Car model', 'Year of manufacture', 'Available'],
    columns: [
      {
        data: 'car'
      },
      {
        data: 'year',
        type: 'numeric'
      },
      {
        data: 'available',
        type: 'checkbox'
      }
    ]
  });

function doalert(checkboxElem) {
  if (checkboxElem.checked) {
 	var rows = hot1.countRows();
  for(var i = 0; i < rows; i++){
  	hot1.setDataAtCell(i, 2, true)
  }
 }
  else {
     	var rows = hot1.countRows();
  for(var i = 0; i < rows; i++){
  	hot1.setDataAtCell(i, 2, false)
  }
}
}
});

</style><!-- Ugly Hack due to jsFiddle issue -->

<script src="http://docs.handsontable.com/pro/1.7.4/bower_components/handsontable-pro/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="http://docs.handsontable.com/pro/1.7.4/bower_components/handsontable-pro/dist/handsontable.full.min.css"><style>
button {
  padding: 10px;
  margin: 10px 0;
}

<div id="example1" class="hot handsontable htColumnHeaders"></div>
   CheckAll/UncheckAll<input type="checkbox" name="checkfield" id="g01-01"  onchange="doalert(this)"/>

请帮助。

Answer 1

您可以这样做：

const example1 = document.getElementById('example1');
const hot1 = new Handsontable(example1, {
  data: getCarData(),
  colHeaders: ['Car model', 'Year of manufacture', 'Available'],
  columns: [{data: 'car'},{data: 'year',type: 'numeric'},{data: 'available',type: 'checkbox'}]
});

function getCarData() {
  return [{car: 'Mercedes A 160',year: 2012,available: true,comesInBlack: 'yes'},{car: 'Citroen C4 Coupe',year: 2013,available: false,comesInBlack: 'yes'},{car: 'Audi A4 Avant',year: 2014,available: true,comesInBlack: 'no'},{car: 'Opel Astra',year: 2015,available: false,comesInBlack: 'yes'},{car: 'BMW 320i Coupe',year: 2016,available: false,comesInBlack: 'no'}];
}

function doalert(checkboxElem) {
  example1
    .querySelectorAll('input[type=checkbox]')
    .forEach(elem => elem.checked = checkboxElem.checked);
}

</style><!-- Ugly Hack due to jsFiddle issue --><script src="http://docs.handsontable.com/pro/1.7.4/bower_components/handsontable-pro/dist/handsontable.full.min.js"></script><link type="text/css" rel="stylesheet" href="http://docs.handsontable.com/pro/1.7.4/bower_components/handsontable-pro/dist/handsontable.full.min.css"><style>button {
  padding: 10px;
  margin: 10px 0;
}

<div id="example1" class="hot handsontable htColumnHeaders"></div>

<label for="g01-01">CheckAll/UncheckAll</label>
<input type="checkbox" name="checkfield" id="g01-01" onchange="doalert(this)" />

Answer 2

我使用您不同的方式来获取触发器更改功能。

document.addEventListener("DOMContentLoaded", function() {

  function getCarData() {
    return [
      {car: "Mercedes A 160", year: 2012, available: true, comesInBlack: 'yes'},
      {car: "Citroen C4 Coupe", year: 2013, available: false, comesInBlack: 'yes'},
      {car: "Audi A4 Avant", year: 2014, available: true, comesInBlack: 'no'},
      {car: "Opel Astra", year: 2015, available: false, comesInBlack: 'yes'},
      {car: "BMW 320i Coupe", year: 2016, available: false, comesInBlack: 'no'}
    ];
  }
  
  var example1 = document.getElementById('example1'),

  hot1 = new Handsontable(example1, {
    data: getCarData(),
    colHeaders: ['Car model', 'Year of manufacture', 'Available'],
    columns: [
      {
        data: 'car'
      },
      {
        data: 'year',
        type: 'numeric'
      },
      {
        data: 'available',
        type: 'checkbox'
      }
    ]
  });

$('input[name=checkfield]').click(function(){
//function doalert(checkboxElem) {
  if ($(this).is(':checked')) {
 	    var rows = hot1.countRows();
      for(var i = 0; i < rows; i++){
  	    hot1.setDataAtCell(i, 2, true)
      }
 }
  else {
     	  var rows = hot1.countRows();
         for(var i = 0; i < rows; i++){
  	      hot1.setDataAtCell(i, 2, false)
       }
  }

})

 
});

</style><!-- Ugly Hack due to jsFiddle issue -->

<script src="http://docs.handsontable.com/pro/1.7.4/bower_components/handsontable-pro/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="http://docs.handsontable.com/pro/1.7.4/bower_components/handsontable-pro/dist/handsontable.full.min.css"><style>
button {
  padding: 10px;
  margin: 10px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="example1" class="hot handsontable htColumnHeaders"></div>
   CheckAll/UncheckAll<input type="checkbox" name="checkfield" id="g01-01"/>

如何使用复选框将所有复选框全部选中或取消选中以将其选中

2 个答案: