js全选，反选，全不选

Posted 2023-04-19

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js全选，反选，全不选相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<script type="text/javascript">
//全选
function test()

for(var i=0;i<document.getElementsByName.length;i++)

var f=document.getElementsByName[i];
if(f.checked=false)

f.checked=true;

//反选
function ftest()

for( var i=0;i<document.getElementsByName.length;i++)

f=document.getElementsByName[i];
if(f.checked=false)

f.checked=true;

else

f.checked=false;

//全部取消
function CancelAll()

for( var i=0;i<document.getElementsByName.length;i++)

f=document.getElementsByName[i];
if(f.checked=true)

f.checked=false;

</script>
</head>

<body>
<input name="game1" type="checkbox" value="lanqiu"/>篮球
<input name="game2" type="checkbox" value="zuqiu"/>足球
<input name="game3" type="checkbox" value="pingpangqiu"/>乒乓球
<input name="game4" type="checkbox" value="bangqiu"/>棒球
<input name="game5" type="checkbox" value="ganlanqiu"/>橄榄球<br/>
<input type="button" value="全选" onclick="test()"/>
<input type="button" value="反选" onclick="ftest()"/>
<input type="button" value="全不选" onclick="CancelAll()"/>

</body>
</html>
哪里有问题，没反应啊

首先选择器写法就不对

document.getElementsByName['game']，至少这么写

其次

由于你所有input标签所有的name属性都不一样，不能批量选择，除非像楼上贴代码那哥们一样，把所有的复选框的name属性都改为game也可以。如果纯粹是为了达到目的话用document.getElementsByTagName("input")，能达到效果

另外，楼上也提到了，判断的等号==

还有提醒楼主一下，不要反复的使用选择器，少量代码无所谓，大量代码的情况下会降低运算效率的。

在楼主的代码基础上改了一下

//全选
function test()

obj = document.getElementsByTagName("input")
for(var i=0;i<obj.length-3;i++)

var f=obj[i];
if(f.checked==false)

f.checked=true;

//反选
function ftest()

obj = document.getElementsByTagName("input")
for( var i=0;i<obj.length-3;i++)

f=obj[i];
if(f.checked==false)

f.checked=true;

else

f.checked=false;

//全部取消
function CancelAll()

obj = document.getElementsByTagName("input")
for( var i=0;i<obj.length-3;i++)

f=obj[i];
if(f.checked==true)

f.checked=false;

参考技术A <!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>MODEL PAGE</title>
<script type="text/javascript">
var choose = function (flag)

var games = document.getElementsByName('game');
if (flag === 1)

for ( var i = 0; i < games.length; i++)

        games[i].checked = true;


else if (flag === -1)

for ( var i = 0; i < games.length; i++)

        games[i].checked = !games[i].checked;


else if (flag === 0)

for ( var i = 0; i < games.length; i++)

        games[i].checked = false;



</script>
</head>
<body>
<input name="game" type="checkbox" value="lanqiu" />篮球
<input name="game" type="checkbox" value="zuqiu" />足球
<input name="game" type="checkbox" value="pingpangqiu" />乒乓球
<input name="game" type="checkbox" value="bangqiu" />棒球
<input name="game" type="checkbox" value="ganlanqiu" />橄榄球
<br />
<input type="button" value="全选" onclick="choose(1)" />
<input type="button" value="反选" onclick="choose(-1)" />
<input type="button" value="全不选" onclick="choose(0)" />
</body>
</html>

参考技术B 你的if判断的等号有问题==

js实现全选,反选,全不选

思路：1、获取元素。2、用for循环历遍数组，把checkbox的checked设置为true即实现全选，把checkbox的checked设置为false即实现不选。3、通过if判断，如果checked为true选中状态的，就把checked设为false不选状态，如果checked为false不选状态的，就把checked设为true选中状态。

js代码

 <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>

html代码

全选：<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 />
     <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>

运行效果

这个button真是太丑了,个人喜欢用<input type="radio">

以上是关于js全选，反选，全不选的主要内容，如果未能解决你的问题，请参考以下文章