javascript实现全选，全不选，反选
Posted 苏落
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript实现全选，全不选，反选相关的知识，希望对你有一定的参考价值。
效果：
利用input的checked属性来实现：checked值为true,表示被选择，否则反之。
实现代码：
js代码：
<script>
var butt1 = document.getElementById("butt1");
var butt2 = document.getElementById("butt2");
var butt3 = document.getElementById("butt3");
var pInput = document.getElementById("pInput");
var opInput = pInput.getElementsByTagName("input");
butt1.onclick = function(){
for(var i = 0;i<opInput.length;i++){
opInput[i].checked = true;
}
}
butt2.onclick = function(){
for(var i = 0;i< opInput.length;i++){
opInput[i].checked = false;
}
}
butt3.onclick = function(){
for(var i = 0;i< opInput.length;i++){
if(opInput[i].checked == false){
opInput[i].checked = true;
}
else{
opInput[i].checked = false;
}
}
}
</script>
实现过程：
1.通过var butt1 = document.getElementById("butt1")来获取对应的id元素。
2.butt1.onclick = function(){ }添加点击事件
3.通过对应元素的.getElementsByTagName(" ")获取该元素下的所有子元素，即数组。（不要忘记那个s）
凡是通过.getElementsByTagName(" ")来获取标签元素的，最后都为数组，可以用索引[i]获取。
4.尽量不使用document.getElementByClassName来获取class元素，我从网上看似乎是说兼容性不太好，有时候浏览器识别不出来。
5.input是checkbox类型时才可进行多选，即全选。radio类型时只能是单选。
完整代码：
<html> <head> <meta charset="utf-8" /> <title>1</title> </head> <body> <div class="Form"> <form> <input type="button" value="全选" id="butt1"></input> <input type="button" value="全不选" id="butt2"></input> <input type="button" value="反选" id="butt3"></input><br/> <p id="pInput"> <input type="checkbox" value="苹果">苹果</input><br/> <input type="checkbox" value="香蕉">香蕉</input><br/> <input type="checkbox" value="橘子">橘子</input> </p> </form> </div> </body> <script> var butt1 = document.getElementById("butt1"); var butt2 = document.getElementById("butt2"); var butt3 = document.getElementById("butt3"); var pInput = document.getElementById("pInput"); var opInput = pInput.getElementsByTagName("input"); butt1.onclick = function(){ for(var i = 0;i<opInput.length;i++){ opInput[i].checked = true; } } butt2.onclick = function(){ for(var i = 0;i< opInput.length;i++){ opInput[i].checked = false; } } butt3.onclick = function(){ for(var i = 0;i< opInput.length;i++){ if(opInput[i].checked == false){ opInput[i].checked = true; } else{ opInput[i].checked = false; } } } </script> </html>
以上是关于javascript实现全选，全不选，反选的主要内容，如果未能解决你的问题，请参考以下文章