网站建设资讯

NEWS

网站建设资讯

javascript全选,javascript全选复选框

js全选,反选,全不选

首先选择器写法就不对

目前成都创新互联已为千余家的企业提供了网站建设、域名、虚拟空间、网站托管、服务器托管、企业网站设计、龙井网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。

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;

}

}

}

JS如何实现全选

//不知道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

javascript全选问题

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

怎么用JavaScript实现复选框的全部选择和全部取消

思路:获取复选框对象→循环设置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、效果演示

js中如何实现多个复选框全选

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

----------------------------------------------------

javascript全选按钮如何实现第二次点击,全部不选

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,你根据需要自己改一下就能用了


网站标题:javascript全选,javascript全选复选框
标题链接:http://cdweb.net/article/dsccpgi.html