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

Question

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

Answer 1

1. 创建一个按钮
2. 向按钮添加事件侦听器。在侦听器中，执行：
   1. 选择要选中所有框的表格元素，例如按 Id
   2. 用于getElementsByTagName输入元素
   3. 循环输入列表：
      • 如果输入的类型是“复选框”，则将其checked属性设置为true

Answer 2

<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>

Answer 3

以下功能应该是不言自明的：

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;
  }
}

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

Answer 4

你可以很容易地使用 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/