js全选,反选,全不选

JavaScript014

js全选,反选,全不选,第1张

首先选择器写法就不对

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

其次

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

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

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

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

//全选

function test()

{

  obj = document.getElementsByTagName("input")

for(var i=0i<obj.length-3i++)

{

var f=obj[i]

if(f.checked==false)

{

f.checked=true

}

}

}

//反选

function ftest()

{

obj = document.getElementsByTagName("input")

for( var i=0i<obj.length-3i++)

{

f=obj[i]

if(f.checked==false)

{

f.checked=true

}

else

{

f.checked=false

}

}

}

//全部取消

function CancelAll()

{

obj = document.getElementsByTagName("input")

for( var i=0i<obj.length-3i++)

{

f=obj[i]

if(f.checked==true)

{

f.checked=false

}

}

}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

 <head>

  <title> New Document </title>

  <script type="text/javascript">

  //全选

function test()

{

   var f=document.getElementsByName("game")

   

for(var i=0i<f.lengthi++)

{

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

{

f[i].checked=true

}

}

}

//反选

function ftest()

{

var f=document.getElementsByName("game")

for( var i=0i<f.lengthi++)

{

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

{

f[i].checked=true

}

else

{

f[i].checked=false

}

}

}

//全部取消

function CancelAll()

{

var f=document.getElementsByName("game")

for( var i=0i<f.lengthi++)

{

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

{

f[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="test()"/>

<input type="button" value="反选" onclick="ftest()"/>

<input type="button" value="全不选" onclick="CancelAll()"/>

</body>

</html>

把if(f[i].checked=true) 改为 if(f[i].checked==true)

本文实例讲述了js实现checkbox全选、不选与反选的方法。分享给大家供大家参考。具体分析如下:

一、思路:

1.

获取元素

2.

给全选

不选

反选添加点击事件

3.

用for循环checkbox

4.

把checkbox的checked设置为true即实现全选

5.

把checkbox的checked设置为false即实现不选

6.

通过if判断,如果checked为true选中状态的,就把checked设为false不选状态,如果checked为false不选状态的,就把checked设为true选中状态。

二、html代码:

<input

type="button"

value="全选"

id="sele"/>

<input

type="button"

value="不选"

id="setinterval"/>

<input

type="button"

value="反选"

id="clear"/>

<div

id="checkboxs">

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

三、js代码:

<script>

window.onload=function(){

var

sele=document.getElementById('sele')//获取全选

var

unsele=document.getElementById('setinterval')//获取不选

var

clear=document.getElementById('clear')//获取反选

var

checkbox=document.getElementById('checkboxs')//获取div

var

checked=checkbox.getElementsByTagName('input')//获取div下的input

//全选

sele.onclick=function(){

for(i=0i<checked.lengthi++){

checked[i].checked=true

}

}

//不选

unsele.onclick=function(){

for(i=0i<checked.lengthi++){

checked[i].checked=false

}

}

//反选

clear.onclick=function(){

for(i=0i<checked.lengthi++){

if(checked[i].checked==true){

checked[i].checked=false

}

else{

checked[i].checked=true

}

}

}

}

</script>

希望本文所述对大家的javascript程序设计有所帮助。