JQuery开发获取复选框选中的个数

2019-03-2209:51:52WEB前端开发Comments2,142 views字数 1134阅读模式

有这么一个需求,在多个复选框中最多选四个,并且复选框一旦选中之后,就不能再次选择。用JQuery实现不难,在这里简单记录一下,先看看下面的效果演示吧。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10295.html

效果演示文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10295.html

你喜欢下面哪些网站,最多选4个。多过4个就没得选~文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10295.html

JQuery Code文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10295.html

<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>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10295.html

通过jQuery获取checkbox选中项的个数,需要用到jQuery的size()方法或length属性,下面的例子是通过length属性获得checkbox选中项的个数。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10295.html

或者下面的代码也可以:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10295.html

<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">歌曲一
<input type="checkbox">歌曲二
<input type="checkbox">歌曲三
<input type="button" value="看看">
</form>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10295.html

 文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10295.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10295.html
  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/gcs/10295.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定