日期:2014-05-16 浏览次数:20358 次
<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方法实现了你所说的要求,希望对楼主有所帮助。
<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