87,997
社区成员
发帖
与我相关
我的任务
分享请教一个checkbox连续选择的问题
就是有一列checkbox，只能连续选择其中的4个，超过4个或者没有连续选择的话会弹框提示并阻止
如图：
类似这两个样子是允许的
类似这样的三个样子是不允许的
求各位大神帮忙解决一下！
谢谢！
如图：
类似这两个样子是允许的
类似这样的三个样子是不允许的
求各位大神帮忙解决一下！
谢谢！
...全文
请发表友善的回复…
发表回复
Dick_Cowboy 2014-09-11
- 打赏
- 举报
可以帮我改一下吗？改成点击提交按钮以后再检查是否是连续的或者超过了4个，谢谢！
_小白_ 2014-09-09
- 打赏
- 举报
试试我发的这个是不是楼主，你想要的？
_小白_ 2014-09-09
- 打赏
- 举报
<!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>
KK3K2005 2014-09-09
- 打赏
- 举报
每个check给个数字 从 1- 10（假定你有10个）
然后获取打钩的check的数字
4个 且连续
Dick_Cowboy 2014-09-08
- 打赏
- 举报
不要沉啊！
Dick_Cowboy 2014-09-08
- 打赏
- 举报
不要沉啊！
程序员鼓励师 2014-09-08
- 打赏
- 举报
<!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>
加了个按钮来判断 ,看看行么
Dick_Cowboy 2014-09-08
- 打赏
- 举报
不要沉啊！Dick_Cowboy 2014-09-08
- 打赏
- 举报
不要沉啊！Dick_Cowboy 2014-09-08
- 打赏
- 举报
你这个例子对是否连续选择并没有限制到呀
程序员鼓励师 2014-09-08
- 打赏
- 举报
<!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>
