【js教程】遍历checkbox提交之后显示打钩

本文详细解析了一个使用JavaScript实现的Checkbox选中状态联动功能。通过分析代码,解释了如何利用getElementById()和getElementsByTagName()方法控制多个Checkbox的选中状态。

 

原址:http://wenku.baidu.com/view/0d30474bfe4733687e21aa31.html

今天想要做个好友发信功能模块,但是不太了解checkboxjs结合的属性和作用,于是就上网找了些例子来分析一下。

<script language="javascript"> function chk() var dd = document.getElementsByTagName("input") for(i=0;i <dd.length;i++) {   if(dd[i].type== 'checkbox' && dd[i].id != "xx"){    dd[i].checked = document.getElementById("xx").checked;  } </script><input type="checkbox" name="checkbox1" id="xx" value="checkbox"onclick="chk()" /><input type="checkbox" name="checkbox2" value="checkbox" /><input type="checkbox" name="checkbox3" value="checkbox" /><input type="checkbox" name="checkbox4" value="checkbox" /><input type="checkbox" name="checkbox5" value="checkbox" /><input type="checkbox" name="checkbox" value="checkbox" /><input type="checkbox" name="checkbox6" value="checkbox" />

这段代码的功能是当选中第一个的时候,全部选框都会自动选中。但选中其他框的时候,正常checked

首先解读一下checkbox的属性,checkbox.checked前面是checkbox的对象,后面的是方法,这表示这个框被选中。

而这里的js代码中有getElementById() 也有getElementByTagName()。第一个方法通常是准确定位id名,直接找到对象。而第二个的方法则是多用来遍历对象,通过对象采取的标签名来识别。最后将遍历的对象进行条件筛选用。

这样就可以很容易理解上面那js里面的代码意义了。

<input type="checkbox" name="checkbox1" id="xx" value="checkbox" onclick="chk()" /> // 首先,必须选中第一个框,才会加载js脚本chk()------------------------------------------------------------------

<script language="javascript"> function chk() var dd = document.getElementsByTagName("input") //通过标签名,找到所有用input的对象;for(i=0;i <dd.length;i++) {   if(dd[i].type== 'checkbox' && dd[i].id != "xx"){ //判断获取的对象中是checkbox控件的,而且不能是第一个选框"xx"   dd[i].checked = document.getElementById("xx").checked;//当第一个选框"xx"被选中,对象[i]也被选中。  } </script>

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值