js如何实现全选,不选,反选？
大家好，今天给大家分享一个《js实现全选,不选,反选》技巧，具体思路如下：
思路：1、获取元素。2、用for循环历遍数组，把checkbox的checked设置为true即实现全选，把checkbox的checked设置为false即实现不选。3、通过if判断，如果checked为true选中状态的，就把checked设为false不选状态，如果checked为false不选状态的，就把checked设为true选中状态。
具体代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js实现全选,不选,反选</title>
<script>
window.onload=function()
{
var CheckAll=document.getElementById('All');
var UnCheck=document.getElementById('uncheck');
var OtherCheck=document.getElementById('othercheck');
var div=document.getElementById('div');
var CheckBox=div.getElementsByTagName('input');
CheckAll.onclick=function(){
for(i=0;i<CheckBox.length;i++){
CheckBox[i].checked=true;
};
};
UnCheck.onclick=function(){
for(i=0;i<CheckBox.length;i++){
CheckBox[i].checked=false;
};
};
othercheck.onclick=function(){
for(i=0;i<CheckBox.length;i++){
if(CheckBox[i].checked==true){
CheckBox[i].checked=false;
}
else{
CheckBox[i].checked=true
}
};
};
};
</script>
</head>
<body>
<input type="button" id="All" value="全选" /><br />
<input type="button" id="uncheck" value="不选" /><br />
<input type="button" id="othercheck" value="反选" /><br />
<div id="div">
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
</div>
</body>
</html>具体效果如下：
下一篇： 全面的前端工程师面试问题汇总
上一篇：jq实现点击和键盘Tab键切换选项卡
评论