请教一个checkbox连续选择的问题

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>多选框</title>
<script>
function $A(name){return document.getElementsByName(name);}
window.onload=function(){
/**
* 复选框限制
* @param {Object} name 复选框的name
* @param {Object} maxck 最多复选个数
*/
function checks(name,maxck){
var cks = $A(name);
function check(){
var t=0;
for(i=0;i<cks.length;i++){
if(cks[i].checked){t++;}
if(t>maxck){return false;}
}
return true;
}
for(i=0;i<cks.length;i++){
cks[i].onclick=function(){
if(!check()){
alert("最多选择"+maxck+"个");
this.checked=false;
}
}
}

}

checks("cd1",4);

//return true;

}
</script> </head>
<body>

<form name="form1" method="post" >
对这个限制4个选择<br>
<input type="CHECKBOX" name="cd1" value="A">A
<input type="CHECKBOX" name="cd1" value="B">B
<input type="CHECKBOX" name="cd1" value="C">C
<input type="CHECKBOX" name="cd1" value="D">D
<input type="CHECKBOX" name="cd1" value="E">E
<input type="CHECKBOX" name="cd1" value="F">F
<input type="CHECKBOX" name="cd1" value="G">G
<input type="CHECKBOX" name="cd1" value="H">H
<input type="CHECKBOX" name="cd1" value="I">I
<input type="CHECKBOX" name="cd1" value="J">J
<br>

</form>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>多选框</title>
<script>
function $A(name){return document.getElementsByName(name);}
window.onload=function(){
/**
* 复选框限制
* @param {Object} name 复选框的name
* @param {Object} maxck 最多复选个数
*/
function checks(name,maxck){var value="";var cks = $A(name);
function check(){
var t=0;
for(i=0;i<cks.length;i++){
if(cks[i].checked){t++;   }
if(t>maxck){return false;}
}
return true;
}
for(i=0;i<cks.length;i++){
cks[i].onclick=function(){
if(!check()){
alert("最多选择"+maxck+"个");
this.checked=false;
}
}
}}checks("cd1",4);

}function a()
{
   var value="";
   for (var i=0;i<cd1.length;i++ ){
     if(cd1[i].checked){ //判断复选框是否选中
    value=value+cd1[i].value + ","; //
  }
   }

var aa= value.substring(0,value.length-1);if(testStr(aa)!=true)
{
alert("没有连续选择");}
else
{alert("连续选择(^_^)");}}
function testStr(str){  var arrStr = str.split(",");  var startStr = arrStr[0].charCodeAt();  for(var i=1,n=arrStr.length;i<n;i++){    if(arrStr[i].charCodeAt() != ++startStr) return false;  }  return true;}</script> </head>
<body><form name="form1" method="post"  >
对这个限制4个选择<br>
<input type="CHECKBOX" id=cd1 name="cd1" value="A">A
<input type="CHECKBOX" id=cd1 name="cd1" value="B">B
<input type="CHECKBOX" id=cd1 name="cd1" value="C">C
<input type="CHECKBOX" id=cd1 name="cd1" value="D">D
<input type="CHECKBOX" id=cd1 name="cd1" value="E">E
<input type="CHECKBOX" id=cd1 name="cd1" value="F">F
<input type="CHECKBOX" id=cd1 name="cd1" value="G">G
<input type="CHECKBOX" id=cd1 name="cd1" value="H">H
<input type="CHECKBOX" id=cd1 name="cd1" value="I">I
<input type="CHECKBOX" id=cd1 name="cd1" value="J">J
<br>

<input type=button value='连续选择判断' onclick=a()>
</form>
</body>
</html>
加了个按钮来判断 ,看看行么

每个check给个数字从 1- 10（假定你有10个）
然后获取打钩的check的数字
4个且连续

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>checkbox</title>
    <script src="jquery-1.8.3.min.js"></script>
</head>
<body>
<div class="test-checkbox J-checkbox">
    <input type="checkbox" name="cb" data-index="0">1 号 <br/>
    <input type="checkbox" name="cb" data-index="1">2 号<br/>
    <input type="checkbox" name="cb" data-index="2">3 号 <br/>
    <input type="checkbox" name="cb" data-index="3">4 号 <br/>
    <input type="checkbox" name="cb" data-index="4">5 号 <br/>
    <input type="checkbox" name="cb" data-index="5">6 号 <br/>
</div>
<script>
    jQuery(function ($) {
        function checkBox(num) {
            var $checkBox = $(".J-checkbox").find("input[name=cb]");            $checkBox.on("click", function () {
                var tempArr = []; //已经被选中的值索引
                var saveArr = []; //保存是否连续的值
                var checkObj = []; //保存被选中的状态                $checkBox.each(function () {
                    var $this = $(this), $thisIndex = $this.data("index");
                    if ($this.prop("checked")) {
                        checkObj[$thisIndex] = true;
                        tempArr.push($thisIndex);
                    } else {
                        checkObj[$thisIndex] = false;
                    }
                });                for (var i = 0, len = checkObj.length; i < len; i++) {
                    if (checkObj[i]) {
                        saveArr.push(i);
                        if (checkObj[i + 1]) {
                            continue;
                        } else {
                            break;
                        }
                    }
                }                if (saveArr.length <= num) {
                    if (saveArr.sort().toString() != tempArr.sort().toString()) {
                        alert("因为不是连续的选中项, 所以不能选中或者取消！");
                        return false;
                    }
                } else {
                    alert("大于" + num + "个不能继续连续选中了！");
                    return false;
                }
            });
        }        checkBox(4);
    });
</script>
</body>
</html>

调试易

请教一个checkbox连续选择的问题

解决方案 »