【JavaScript】复选框的全选、反选，判断哪些复选框被选中

最新推荐文章于 2024-04-02 19:39:43 发布

yongh701

最新推荐文章于 2024-04-02 19:39:43 发布

阅读量5.3k

点赞数 1

分类专栏： JavaScript 文章标签： javascript 遍历复选框全选反选

本文链接：https://blog.csdn.net/yongh701/article/details/46385471

版权

JavaScript 专栏收录该内容

58 篇文章 1 订阅

订阅专栏

复选框的全选、反选，判断哪些复选框被选中，这个功能不难做，

利用document.getElementsByName("xxx");能够轻易实现，注意其返回值是一个节点数组便是了。

不过这功能对于用户来说是非常贴心的。下面举一个例子还说明这个问题。

首先是以下的布局：

HTML代码如下，非常简单，三个按钮，分别设置其onclick事件所对应处理的javascript函数。

之后有四个复选框，注意设置其统一的name值，形成一个节点数组。以便被后续的document.getElementsByName方法取到。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>全选</title>
    </head>
    <body>
    <button οnclick="selected()"/>哪里复选框被选中？ </button>
	<button οnclick="selectAll()"/>全选</button>
	<button οnclick="selectReserve()"/>反选</button><br/>
	1<input type="checkbox" name="checkBoxGroup" value="1"/><br/>
	2<input type="checkbox" name="checkBoxGroup" value="2"/><br/>
	3<input type="checkbox" name="checkBoxGroup" value="3"/><br/>
	4<input type="checkbox" name="checkBoxGroup" value="4"/><br/>
</body>
</html>

之后是javascript处理函数，为了做到如下的效果，其处理脚本如下：

<script type="text/javascript">
	//哪里复选框被选中？遍历这个复选框数组，可以用value来取出其值
    function selected(){
        var checkBoxArr = document.getElementsByName("checkBoxGroup");
		var str="被选中的复选框有：";
        for (var i = 0; i < checkBoxArr.length; i++) {
			if(checkBoxArr[i].checked){
				str+=checkBoxArr[i].value+",";
			}
        }
		alert(str);
    }
    //全选，遍历这个复选框数组，所有checked值为true
    function selectAll(){
        var checkBoxArr = document.getElementsByName("checkBoxGroup");
        for (var i = 0; i < checkBoxArr.length; i++) {
            checkBoxArr[i].checked = "true";
        }
    }
    //反选，遍历这个复选框数组，所有checked值为原来的反。
    function selectReserve(){
        var checkBoxArr = document.getElementsByName("checkBoxGroup");
        for (var i = 0; i < checkBoxArr.length; i++) {
            checkBoxArr[i].checked = (!checkBoxArr[i].checked);
        }
    }	
</script>

yongh701

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
【JavaScript】复选框的全选、反选，判断哪些复选框被选中

复选框的全选、反选，判断哪些复选框被选中，这个功能不难做，利用document.getElementsByName("xxx");能够轻易实现，注意其返回值是一个节点数组便是了。不过这功能对于用户来说是非常贴心的。下面举一个例子还说明这个问题。首先是以下的布局：HTML代码如下，非常简单，三个按钮，分别设置其onclick事件所对应处理的javascript函数。之后有
复制链接

扫一扫