當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

js实现全选和反选功能

發布時間：2025/6/15 编程问答 18 豆豆

生活随笔收集整理的這篇文章主要介紹了 js实现全选和反选功能小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

最近沒事做，就用js寫了一個復選框選擇全選時，下面的按鈕也都會選擇上，當下面的選框被全選時，全選按鈕也會被選中;還實現了一個反選功能，可供大家參考，如果大家有好的建議也可以給我留言，我們一起學習...

<script language="javascript">

//選中全選按鈕，下面的checkbox全部選中
var selAll = document.getElementById("selAll");
function selectAll()
{
? var obj = document.getElementsByName("checkAll");
? if(document.getElementById("selAll").checked == false)
? {
? for(var i=0; i<obj.length; i++)
? {
? ? obj[i].checked=false;
? }
? }else
? {
? for(var i=0; i<obj.length; i++)
? { ?
? ? obj[i].checked=true;
? }
? }
?
}

//當選中所有的時候，全選按鈕會勾上
function setSelectAll()
{
var obj=document.getElementsByName("checkAll");
var count = obj.length;
var selectCount = 0;

for(var i = 0; i < count; i++)
{
if(obj[i].checked == true)
{
selectCount++;
}
}
if(count == selectCount)
{
document.all.selAll.checked = true;
}
else
{
document.all.selAll.checked = false;
}
}

//反選按鈕
function inverse() {
var checkboxs=document.getElementsByName("checkAll");
for (var i=0;i<checkboxs.length;i++) {
? var e=checkboxs[i];
? e.checked=!e.checked;
? setSelectAll();
}
}

</script>

<html>
<body>
<center>
<input type="checkbox" id="selAll" οnclick="selectAll();" />全選
<input type="checkbox" id="inverse" οnclick="inverse();" />反選
<div id="allcheck">
<input type="checkbox" name="checkAll" id="checkAll" οnclick="setSelectAll();"/>足球<br>
<input type="checkbox" name="checkAll" id="checkAll" οnclick="setSelectAll();"/>籃球<br>
<input type="checkbox" name="checkAll" id="checkAll" οnclick="setSelectAll();"/>跑步<br>
<input type="checkbox" name="checkAll" id="checkAll" οnclick="setSelectAll();"/>登山<br>
<input type="checkbox" name="checkAll" id="checkAll" οnclick="setSelectAll();"/>唱歌<br>
<input type="checkbox" name="checkAll" id="checkAll" οnclick="setSelectAll();"/>跳舞<br>
</div>
</center>
</body>

</html>

思路：1、獲取元素。2、用for循環歷遍數組，把checkbox的checked設置為true即實現全選，把checkbox的checked設置為false即實現不選。3、通過if判斷，如果checked為true選中狀態的，就把checked設為false不選狀態，如果checked為false不選狀態的，就把checked設為true選中狀態。

JS代碼：

1 <script> 2 window.onload=function(){ 3 var CheckAll=document.getElementById('All'); 4 var UnCheck=document.getElementById('uncheck'); 5 var OtherCheck=document.getElementById('othercheck'); 6 var div=document.getElementById('div'); 7 var CheckBox=div.getElementsByTagName('input'); 8 CheckAll.onclick=function(){ 9 for(i=0;i<CheckBox.length;i++){ 10 CheckBox[i].checked=true; 11 }; 12 }; 13 UnCheck.onclick=function(){ 14 for(i=0;i<CheckBox.length;i++){ 15 CheckBox[i].checked=false; 16 }; 17 }; 18 othercheck.onclick=function(){ 19 for(i=0;i<CheckBox.length;i++){ 20 if(CheckBox[i].checked==true){ 21 CheckBox[i].checked=false; 22 } 23 else{ 24 CheckBox[i].checked=true 25 } 26 27 }; 28 }; 29 }; 30 </script>

HTML代碼：

1 全選：<input type="button" id="All" value="全選" /><br /> 2 不選<input type="button" id="uncheck" value="不選" /><br /> 3 反選<input type="button" id="othercheck" value="反選" /><br /> 4 <div id="div"> 5 <input type="checkbox" /><br /> 6 <input type="checkbox" /><br /> 7 <input type="checkbox" /><br /> 8 <input type="checkbox" /><br /> 9 <input type="checkbox" /><br /> 10 <input type="checkbox" /><br /> 11 <input type="checkbox" /><br /> 12 <input type="checkbox" /><br /> 13 <input type="checkbox" /><br /> 14 <input type="checkbox" /><br /> 15 <input type="checkbox" /><br /> 16 <input type="checkbox" /><br /> 17 <input type="checkbox" /><br /> 18 <input type="checkbox" /><br /> 19 <input type="checkbox" /><br /> 20 <input type="checkbox" /><br /> 21 <input type="checkbox" /><br /> 22 <input type="checkbox" /><br /> 23 <input type="checkbox" /><br /> 24 <input type="checkbox" /><br /> 25 </div>

總結

以上是生活随笔為你收集整理的js实现全选和反选功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。