首先选择器写法就不对
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程序设计有所帮助。