简明现代魔法 -> JQuery -> JQuery获取复选框选中的个数

JQuery获取复选框选中的个数

2011-06-29

有这么一个需求,在多个复选框中最多选四个,并且复选框一旦选中之后,就不能再次选择。用JQuery实现不难,在这里简单记录一下,先看看下面的效果演示吧。

效果演示

你喜欢下面哪些网站,最多选4个。多过4个就没得选~

  1. www.nowamagic.net
  2. www.google.com
  3. www.163.com
  4. www.qq.com
  5. www.g.cn
  6. www.zhengzeyan.net
  7. news.163.com
  8. mail.163.com

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>
随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们