复选框怎么限制最多的选中数目
日期：2014-05-16 浏览次数：20451 次
复选框如何限制最多的选中数目？
我的HTML代码是这样的形式：name
请问各位如何才能实现限制最多的选中数目，一旦达到最大数目后，其它复选框变为不可选状态呢？
感谢！
------解决方案--------------------
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function init(){
var cs=document.getElementsByName("sl");
for(var i=0;i<cs.length;i++){
cs[i].onclick=function(){
var num=0;
for(var i=0;i<cs.length;i++){
if(cs[i].checked){
num++;
}
}
if(num>=2){
for(var i=0;i<cs.length;i++){
if(!cs[i].checked){
cs[i].disabled="disabled";
}
}
}else{
for(var i=0;i<cs.length;i++){
if(!cs[i].checked){
cs[i].disabled=false;
}
}
}
}
}
}
window.onload=init;
</script>
</head>
<body>
<form action="" method="post">
<input type="checkbox" name="sl"/>1
<input type="checkbox" name="sl" />2
<input type="checkbox" name="sl" />3
<input type="checkbox" name="sl" />4
<input type="checkbox" name="sl" />5
</form>
</body>
</html>
这样试试
------解决方案--------------------
var cs=getElementsByTagName("input");
for(var i=0;i<cs.length;i++){
if(cs[i].type=="checkbox"){
cs[i].onclick=function(){
....
}
}
}
------解决方案--------------------
用jQuery吧，这个就3行代码的事儿
我的HTML代码是这样的形式：name
<form action="" method="post">
<input type="checkbox" name="sl[0]" />
<input type="checkbox" name="sl[1]" />
<input type="checkbox" name="sl[2]" />
<input type="checkbox" name="sl[3]" />
<input type="checkbox" name="sl[...]" />
</form>
请问各位如何才能实现限制最多的选中数目，一旦达到最大数目后，其它复选框变为不可选状态呢？
感谢！
------解决方案--------------------
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function init(){
var cs=document.getElementsByName("sl");
for(var i=0;i<cs.length;i++){
cs[i].onclick=function(){
var num=0;
for(var i=0;i<cs.length;i++){
if(cs[i].checked){
num++;
}
}
if(num>=2){
for(var i=0;i<cs.length;i++){
if(!cs[i].checked){
cs[i].disabled="disabled";
}
}
}else{
for(var i=0;i<cs.length;i++){
if(!cs[i].checked){
cs[i].disabled=false;
}
}
}
}
}
}
window.onload=init;
</script>
</head>
<body>
<form action="" method="post">
<input type="checkbox" name="sl"/>1
<input type="checkbox" name="sl" />2
<input type="checkbox" name="sl" />3
<input type="checkbox" name="sl" />4
<input type="checkbox" name="sl" />5
</form>
</body>
</html>
这样试试
------解决方案--------------------
var cs=getElementsByTagName("input");
for(var i=0;i<cs.length;i++){
if(cs[i].type=="checkbox"){
cs[i].onclick=function(){
....
}
}
}
------解决方案--------------------
用jQuery吧，这个就3行代码的事儿
<form action="" method="post">
<input type="checkbox" name="sl[0]" />
<input type="checkbox" name="sl[1]" />
<input type="checkbox" name="sl[2]" />
<input type="checkbox" name="sl[3]" />
<input type="checkbox" name="sl[...]" />
</form>
最多选中3个
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
<script>
$('form').delegate('input[type="checkbox"][name^="sl\\["]', 'click', function (e){
var boxes = $('input[type="checkbox"][name^="sl\\["]',this.form);
boxes.filter(':not(:checked)').prop('disabled', boxes.filter(':checked').length >= 3);
});
</script>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
