大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
首先选择器写法就不对
目前成都创新互联已为千余家的企业提供了网站建设、域名、虚拟空间、网站托管、服务器托管、企业网站设计、龙井网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。
document.getElementsByName['game'],至少这么写
其次
由于你所有input标签所有的name属性都不一样,不能批量选择,除非像楼上贴代码那哥们一样,把所有的复选框的name属性都改为game也可以。如果纯粹是为了达到目的话用document.getElementsByTagName("input"),能达到效果
另外,楼上也提到了,判断的等号==
还有提醒楼主一下,不要反复的使用选择器,少量代码无所谓,大量代码的情况下会降低运算效率的。
在楼主的代码基础上改了一下
//全选
function test()
{
obj = document.getElementsByTagName("input")
for(var i=0;iobj.length-3;i++)
{
var f=obj[i];
if(f.checked==false)
{
f.checked=true;
}
}
}
//反选
function ftest()
{
obj = document.getElementsByTagName("input")
for( var i=0;iobj.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;iobj.length-3;i++)
{
f=obj[i];
if(f.checked==true)
{
f.checked=false;
}
}
}
//不知道jquery可以吗,原理差不多
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
title购物车/title
script src="../js/jquery-1.6.2.min.js" type="text/javascript"/script
script language="javascript" type="text/javascript"
$(function () {
$("#selectAll").click(function () {//全选
$("#AList :checkbox").attr("checked", true);
});
$("#unSelect").click(function () {//全不选
$("#AList :checkbox").attr("checked", false);
});
$("#reverse").click(function () {//反选
$("#AList :checkbox").each(function () {
$(this).attr("checked", !$(this).attr("checked"));
});
});
});
/script
/head
body
!-- 该处以A商家的购物车为例 --
div id="A"
input type="button" value="全选" id="selectAll" /
input type="button" value="全不选" id="unSelect" /
input type="button" value="反选" id="reverse" /
div id="AList"
input type="checkbox" value="商品1" /商品1br /
input type="checkbox" value="商品2" /商品2br /
input type="checkbox" value="商品3" /商品3br /
input type="checkbox" value="商品4" /商品4br /
input type="checkbox" value="商品5" /商品5br /
/div
/div
/body
/html
html
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
title无标题文档/title
style type="text/css"
!--
.STYLE1 {font-size: 18px}
--
/style
script language="javascript"
function checkAll(boolValue)
{
var allcheck=document.getElementsByName("choose");
for(var i=0;iallcheck.length;i++)
if(allcheck[i].type=="checkbox")
allcheck[i].checked=boolValue;
}
function selectAll()
{
var checkbox1=document.getElementById("checkbox1");
if(checkbox1.checked==true )
{
checkAll(true);
}
else
{
checkAll(false);
}
}
/script
/head
body
form
table width="523" height="425" border="1"
tr
td colspan="4"div align="center" class="STYLE1"世界顶级跑车你认识几款?/div/td
/tr
tr
td height="32" colspan="4" align="center"
input type="checkbox" name="checkbox1" id="checkbox1" onClick="selectAll()" /
我是超级车迷,全部都认识
/td
/tr
tr
td width="107" height="126"
input type="checkbox" name="choose" id="choose" /
/td
td width="130"img src="images/frali.jpg" width="127" height="95" //td
td width="123" input type="checkbox" name="choose" //td
td width="135"img src="images/skoda.jpg" width="116" height="116" //td
/tr
tr
td height="109" input type="checkbox" name="choose" //td
tdimg src="images/binli.jpg" width="129" height="99" //td
td input type="checkbox" name="choose" //td
tdimg src="images/lamborghini.jpg" width="127" height="95" //td
/tr
tr
td input type="checkbox" name="choose" //td
tdimg src="images/porsche.jpg" width="130" height="116" //td
td input type="checkbox" name="choose" //td
tdimg src="images/alefromeo.jpg" width="116" height="87" //td
/tr
/table
/form
/body
/html
思路:获取复选框对象→循环设置ckecked属性值(true表示选中,false表示未选中)。关键代码:
obj.checked = true | false;
实例演示如下:
1、HTML结构
input type="checkbox" name="test" value="1"item-1
input type="checkbox" name="test" value="2"item-2
input type="checkbox" name="test" value="3"item-3br
input type="checkbox" name="test" value="4"item-4
input type="checkbox" name="test" value="5"item-5br
input type="button" value="全选" onclick="setChecked(true)"input type="button" value="取消" onclick="setChecked(false)"
2、javascript代码
function setChecked(option){
var cks = document.getElementsByName("test");
for(i=0;icks.length;i++){
cks[i].checked = option;
}
}
3、效果演示
CheckBox复选框JS实现全选全不选功能,很简单,就只需插入一小段js函数就行了。。。
script language="javascript"
function cli(Obj)
{
//获取控制其它复选框的对象obj
var collid = document.getElementByIdx_x("all")
//获取需要全选,全不选功能的所有复选框
var coll = document.getElementsByName(Obj)
//如果obj被选中,则全选
if (collid.checked){
//循环设置所有复选框为选中状态
for(var i = 0; i coll.length; i++)
coll[i].checked = true;
}else{//取消obj选中状态,则全不选
//循环设置所有复选框为未选中状态
for(var i = 0; i coll.length; i++)
coll[i].checked = false;
}
}
/script
----------------------------------------------------
下面是一组CheckBox复选框html代码
----------------------------------------------------
input name='多选项名称' type='checkbox' value='' id="all" onclick="cli('多选项名称');" 全选
input name='多选项名称' type='checkbox' value='' A
input name='多选项名称' type='checkbox' value='' B
input name='多选项名称' type='checkbox' value='' C
input name='多选项名称' type='checkbox' value='' D
input name='多选项名称' type='checkbox' value='' E
input name='多选项名称' type='checkbox' value='' F
----------------------------------------------------
input type="checkbox" id="checkAll"/全选/全不选
div id="itemContainer"
input type="checkbox" /A
input type="checkbox" /B
input type="checkbox" /C
/div
script type="text/javascript"
window.onload = init;
function init() {
var checkAllNode = document.getElementById("checkAll"),
itemContainerNode = document.getElementById("itemContainer"),
items = itemContainerNode.getElementsByTagName("input");
checkAllNode.onclick = function() {
for(var i = 0, j = items.length; i j; i++) {
items[i].checked = this.checked;
}
}
}
/script
上面是个DEMO,你根据需要自己改一下就能用了