JQuery获取被选中复选框checkbox的个数
2011-03-18 00:00
531 查看
有这么一个需求,在多个复选框中最多选四个,并且复选框一旦选中之后,就不能再次选择。用JQuery实现不难,在这里简单记录一下,先看看下面的效果演示吧。
www.nowamagic.net
www.google.com
www.163.com
www.qq.com
www.g.cn
www.zhengzeyan.net
news.163.com
mail.163.com
$(document).ready(function(){
$('input[type=checkbox]').click(function(){
$(this).attr('disabled','disabled');
if($("input[name='group1']:checked").length >= 4)
{
//alert("test");
$("input[name='group1']").attr('disabled','disabled');
}
});
$("#compute").click(function(){
$('input').live('click',function(){
//alert($('input:checked').length);
$("#show").html($('input:checked').length);
});
})
})
通过jQuery获取checkbox选中项的个数,需要用到jQuery的size()方法或length属性,下面的例子是通过length属性获得checkbox选中项的个数。
或者下面的代码也可以:
效果演示
你喜欢下面哪些网站,最多选4个。多过4个就没得选~www.nowamagic.net
www.google.com
www.163.com
www.qq.com
www.g.cn
www.zhengzeyan.net
news.163.com
mail.163.com
$(document).ready(function(){
$('input[type=checkbox]').click(function(){
$(this).attr('disabled','disabled');
if($("input[name='group1']:checked").length >= 4)
{
//alert("test");
$("input[name='group1']").attr('disabled','disabled');
}
});
$("#compute").click(function(){
$('input').live('click',function(){
//alert($('input:checked').length);
$("#show").html($('input:checked').length);
});
})
})
JQuery Code
<script type="text/javascript"> $(document).ready(function(){ $('input[type=checkbox]').click(function(){ $(this).attr('disabled','disabled'); if($("input[name='group1']:checked").length >= 4) { //alert("test"); $("input[name='group1']").attr('disabled','disabled'); } }); $("#compute").click(function(){ $('input').live('click',function(){ //alert($('input:checked').length); $("#show").html($('input:checked').length); }); }) }) </script>
通过jQuery获取checkbox选中项的个数,需要用到jQuery的size()方法或length属性,下面的例子是通过length属性获得checkbox选中项的个数。
或者下面的代码也可以:
<script Language="JScript"> function check(){ var boxArray = document.getElementsByName('oBox'); var total = 0; for(var i=0;i<boxArray.length;i++){ if(boxArray[i].checked){ total++; } } if(total>0){ if(window.confirm('共选中'+total+'首歌,是否继续?')){ window.open('about:blank','SubWin',''); return true; } else{ return false; } } else{ window.alert('没有选择!') ; return false; } } </script> <form target="SubWin" onsubmit="return check();"> <input type="checkbox" name="oBox">歌曲一 <input type="checkbox" name="oBox">歌曲二 <input type="checkbox" name="oBox">歌曲三 <input type="button" value="看看"> </form>
相关文章推荐
- jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等
- jquery获取复选框checkbox被选中的值
- jquery获取复选框被选中的值
- jquery 获取checkbox,radio,select被选中的值
- jquery获取复选框被选中的值
- jquery如何判断checkbox(复选框)是否被选中
- 【小结】jQuery 对复选框checkbox 值的获取
- jquery 循环获取checkBox的值,以及对复选框选中,取消,操作按钮
- jquery获取复选框(checkbox)的选中值(数组或者单个)
- jquery获取复选框checkbox的值实现方法
- jquery如何判断checkbox(复选框)是否被选中
- jquery获取所有被选中checkbox
- jquery如何判断checkbox(复选框)是否被选中(转)
- jquery获取复选框被选中的值
- Jquery获取页面中checkbox组中被选中的值
- Jquery判断复选框checkbox是否被选中?(已解决)
- Jquery判断复选框 input type = checkbox 全部选中 ;全部不选中;其中不选中 则 全部就不能被选中;
- jquery如何判断checkbox(复选框)是否被选中
- jQuery如何判断checkbox(复选框)是否被选中
- jquery复选框,怎么获取被选中复选框的同级元素,