复选框:使用 Javascript 而不是 JQuery 选中

Checkbox:checked with Javascript and not JQuery

本文关键字：JQuery 选中 使用 Javascript 复选框      更新时间：2023-09-26

当我尝试通过Javascript将复选框标记为"选中"时，我遇到了问题。我正在分享它的小提琴链接。我想用普通的Javascript而不是JQuery来做。

[Fiddle link]http://jsfiddle.net/vineetgnair/pne58wyh/

感谢您的帮助

var checkBox = document.querySelectorAll('input[type=checkbox]');
// querySelectorAll returns an array of the matching elements
function selectAll() {
  for (i = 0; i < checkBox.length; i++) {
    // loop through and set "checked" to TRUE on every element in the checkBox array
    checkBox[i].checked = true;
  }
}
function deselectAll() {
  // loop through and set "checked" to FALSE on every element in the checkBox array
  for (i = 0; i < checkBox.length; i++) {
    checkBox[i].checked = false;
  }
}
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<br>
<input type="button" value="Select All" onclick="selectAll()">
<input type="button" value="Deselect All" onclick="deselectAll()">

HTML 几乎相同，除了我在 selectAll 函数中添加了一个参数

<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<br>
<input type="button" value="Select All" onclick="selectAll(true)">
<input type="button" value="Deselect All" onclick="selectAll(false)">

对于javascript，你只需要一个循环来设置所有项目为选中或取消选中

function selectAll(selected) {
    var checkBox = document.querySelectorAll('input[type=checkbox]');
    for(var i = 0 ; i < checkBox.length ; i++) {
        checkBox[i].checked = selected;
    } 
}

js小提琴

相关文章：