JavaScript 复选框全选功能案例

Love The Way You Lie 2021-06-24 16:10 529阅读 0赞

## 功能描述 ##

实现一个多栏目复选框的全选，全不选和反选功能。  
![在这里插入图片描述][20190418123707102.png]

## 分析 ##

*  HTML页面：四个复选框 三个按钮。  
    按钮分别绑定三个函数。
    
        <input type="button" name="" id="" value="全选" onclick="selAll()" />
        <input type="button" name="" id="" value="全不选" onclick="selNo()" />
        <input type="button" name="" id="" value="反选" onclick="selOther()" />
 *  获取复选框对象集合，根据需要修改它的checked值  
    **例如：**
    
        function selOther() { 
        	var loves = document.getElementsByName("love");
        	for(var i = 0; i < loves.length; i++) { 
        		var love1 = loves[i];
        		love1.checked = !love1.checked;
        	}
        }

## 代码 ##

<body>
    	<input type="checkbox" name="love" id="love01" />足球
    	<br />
    	<input type="checkbox" name="love" id="love02" />书法
    	<br />
    	<input type="checkbox" name="love" id="love03" />音乐
    	<br />
    	<input type="checkbox" name="love" id="love04" />计算机
    	<br />
    	<input type="button" name="" id="" value="全选" onclick="selAll()" />
    	<input type="button" name="" id="" value="全不选" onclick="selNo()" />
    	<input type="button" name="" id="" value="反选" onclick="selOther()" />
    	<script type="text/javascript"> // 全选方法 function selAll() { var loves = document.getElementsByName("love"); for(var i = 0; i < loves.length; i++) { var love1 = loves[i]; love1.checked = true; } } // 全不选方法 function selNo() { var loves = document.getElementsByName("love"); for(var i = 0; i < loves.length; i++) { var love1 = loves[i]; love1.checked = false; } } // 反选方法 function selOther() { var loves = document.getElementsByName("love"); for(var i = 0; i < loves.length; i++) { var love1 = loves[i]; love1.checked = !love1.checked; } } </script>
    </body>

[20190418123707102.png]: /images/20210615/4b91a84a73464cb287865e93d4d064ae.png