首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

求指点,JS复选框选中有关问题

2012-09-12 
求大虾指点,JS复选框选中问题JS判断复选框,有四个复选框,条件如下选第二个选择框的时候第一个,第二个被选

求大虾指点,JS复选框选中问题
JS判断复选框,有四个复选框,条件如下 
选第二个选择框的时候第一个,第二个被选中,选第三个复选框的时候123被选中,选第四个复选框的的时候1234被选中,然后点哪个复选框哪个复选框要能被取消选中,求大神指点,说实话我已经达到这个效果可尼玛在点的时候取消不了……

[解决办法]

HTML code
<script type="text/javascript">function selectMe(o,index){    for(i=0;i<o.length;i++)    {        if(i<index)        {            if(o[index].checked){o[i].checked=true;}        }    }}function initMe(){    var o=document.getElementsByName("me");    for(i=0;i<o.length;i++)    {        (function(index){            o[index].onclick=function(){                selectMe(o,index);            }        })(i)    }}window.onload=function(){    initMe();}</script><input type="checkbox" name="me" /><input type="checkbox" name="me" /><input type="checkbox" name="me" /><input type="checkbox" name="me" />
[解决办法]
不知道是不是你要的效果,这个需要引用jquery包;代码如下: [code=HTML][/code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script language="javascript">
$(document).ready(function () {
$(":checkbox").click(function () {
if (this.checked) {
var cbID = $(this).attr("id");
for (var i = 1; i <= cbID; i++) {
$("#" + i).attr("checked","true");
}
}
});

});
</script>
</head>
<body>
<input type="checkbox" id="1" />第一个checkbox<br />
<input type="checkbox" id="2" />第二个checkbox<br />
<input type="checkbox" id="3" />第三个checkbox<br />
<input type="checkbox" id="4" />第四个checkbox<br />
</body>
</html>

[解决办法]
用jQuery方法实现了你所说的要求,希望对楼主有所帮助。
JScript code
<script type="text/javascript" src="jquery-1.7.2.min.js"></script><script language="javascript">    $(function(){        $(':checkbox').click(function(){            //获取当前点击复选框前面的同辈复选框元素的个数            var count = $(this).prevAll(':checkbox').size();            if($(this).get(0).checked){                for(var i = 0;i < count;i++){                    $(':checkbox').get(i).checked = true;                }            }        });    })</script>  <input type="checkbox"  />one  <input type="checkbox"  />two  <input type="checkbox"  />three  <input type="checkbox"  />four 

热点排行