如何创建“检查所有”JavaScript方法

How to create "check all" JavaScript method

本文关键字：检查所有 方法 JavaScript 检查 何创建 创建      更新时间：2023-09-26

我感兴趣的是如何创建一个调用JavaScript方法的按钮，该按钮使h：table(简单的html表(中的所有复选框都被选中？以及如何使用 JavaScript 方法再次取消选中表中的所有复选框？你能给我看一些截取的代码或工作示例吗？

  1. 创建按钮
  2. 向按钮添加事件侦听器。在侦听器中，执行以下操作：
    1. 选择要选中所有框的表元素，例如按 Id
    2. 对输入元素使用getElementsByTagName
    3. 循环访问输入列表：
      • 如果输入的类型为"复选框"，则将其checked属性设置为 true 
<h:table>
    <input type="checkbox" />
    <input type="checkbox" />
</h:table>
<script>
    function checkBoxesForMe( checkBoxesOn )
    {
        var table = document.getElementsByTagName( 'h:table' )[ 0 ]
        var inputs = table.getElementsByTagName( 'input' )
        for( var i = 0; i < inputs.length; i ++ )
        {
            if( inputs[ i ].type == 'checkbox' ) 
            {
                if( checkBoxesOn )
                    inputs[ i ].setAttribute( 'checked', true )
                else
                    inputs[ i ].removeAttribute( 'checked' )
            }
        }
    }
</script>

以下函数应该是不言自明的：

function checkboxesCheckAll() {
  var boxes = document.getElementsByTagName('input');
  var i = boxes.length;
  while (i--) {
    if (boxes[i].type == 'checkbox') boxes[i].checked = true;
  }
}
function checkboxesCheckNone() {
  var boxes = document.getElementsByTagName('input');
  var i = boxes.length;
  while (i--) {
    if (boxes[i].type == 'checkbox') boxes[i].checked = false;
  }
}
function checkboxesCheckToggle() {
  var boxes = document.getElementsByTagName('input');
  var i = boxes.length;
  while (i--) {
    if (boxes[i].type == 'checkbox') boxes[i].checked = !boxes[i].checked;
  }
}

或者你可以把它写成一个函数，并传递一个参数来检查、取消或切换它们。

你可以非常轻松地使用 jQuery 来做到这一点：

检查全部

$("[type=checkbox]").prop("checked", true);

取消选中全部：

$("[type=checkbox]").prop("checked", false);

所以用按钮：

<input type="checkbox" name="a">a<br/>
<input type="checkbox" name="b">b<br/>
<input type="checkbox" name="c">c<br/>
<input type="checkbox" name="d">d<br/>
<input type="checkbox" name="e">e<br/>
<button data-action="check">Check All</button>
<button data-action="uncheck">Uncheck All</button>​
$('button').click(function() {
    $("[type=checkbox]").prop("checked", $(this).data('action') === 'check');
})​

小提琴：http://jsfiddle.net/Bn386/

相关文章：