我感兴趣的是如何创建一个调用JavaScript方法的按钮,该按钮使h:table(简单的html表(中的所有复选框都被选中?以及如何使用 JavaScript 方法再次取消选中表中的所有复选框?你能给我看一些截取的代码或工作示例吗?
- 创建按钮
- 向按钮添加事件侦听器。在侦听器中,执行以下操作:
- 选择要选中所有框的表元素,例如按 Id
- 对输入元素使用
getElementsByTagName
- 循环访问输入列表:
- 如果输入的类型为"复选框",则将其
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/