首先選擇器寫法就不對
目前成都創(chuàng)新互聯(lián)已為千余家的企業(yè)提供了網(wǎng)站建設、域名、虛擬空間、網(wǎng)站托管、服務器托管、企業(yè)網(wǎng)站設計、龍井網(wǎng)站維護等服務,公司將堅持客戶導向、應用為本的策略,正道將秉承"和諧、參與、激情"的文化,與客戶和合作伙伴齊心協(xié)力一起成長,共同發(fā)展。
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
思路:獲取復選框對象→循環(huán)設置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實現(xiàn)全選全不選功能,很簡單,就只需插入一小段js函數(shù)就行了。。。
script?language="javascript"
function?cli(Obj)
{
//獲取控制其它復選框的對象obj
var?collid?=?document.getElementByIdx_x("all")
//獲取需要全選,全不選功能的所有復選框
var?coll?=?document.getElementsByName(Obj)
//如果obj被選中,則全選
if?(collid.checked){
//循環(huán)設置所有復選框為選中狀態(tài)
for(var?i?=?0;?i??coll.length;?i++)
coll[i].checked?=?true;
}else{//取消obj選中狀態(tài),則全不選
//循環(huán)設置所有復選框為未選中狀態(tài)
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,你根據(jù)需要自己改一下就能用了