jQuery获取复选框被选中数量及判断选择值的方法详解


Posted in Javascript onMay 25, 2016

本文实例讲述了jQuery获取复选框被选中数量及判断选择值的方法。分享给大家供大家参考,具体如下:

获取复选框被选中值

<input type="button" id="btn5" value="获得选中的所有值">
<input type="text" name="dd" id="dd" size="50" />
$("#btn5").click(function(){
var str="";
$("[name='checkbox'][checked]").each(function(){
str+=$(this).val()+",";
})
$("#dd").val(str)
})

JQuery获取被选中复选框checkbox的个数

通过jQuery获取checkbox选中项的个数,需要用到jQuery的size()方法或length属性,下面的例子是通过length属性获得checkbox选中项的个数

<ul>
 <li><input type="checkbox" name="test" />看电视</li>
 <li><input type="checkbox" name="test" />看电影</li>
 <li><input type="checkbox" name="test" />上网</li>
 <li><input type="checkbox" name="test" />爬山</li>
 <li><input type="checkbox" name="test" />游乐场</li>
 <li><input type="checkbox" name="test" />逛街</li>
 <li><input type="checkbox" name="test" />聚会</li>
</ul>
<p>
<input type="button" id="count" value="有多少CheckBox被选中了?" />
<script type="text/javascript">
$(document).ready(function(){
  $('input[type=checkbox]').click(function(){
    $(this).attr('disabled','disabled');
    if($("input[name='test']:checked").length >= 3)
    {
      $("input[name='test']").attr('disabled','disabled');
    }
  });
  $("#count").click(function(){
    $('input').live('click',function(){ 
      alert($('input:checked').length); 
    });
  })
})
</script>

效果二(选超过三个做弹窗提示):

<script type="text/javascript">
 $('input[type=checkbox]').click(function(){
if($("input[name='test']:checked").length >= 4)
{
$(this).removeAttr("checked");
alert("最多选3个!")}
});
</script>

jquery如何判断checkbox(复选框)是否被选中/全选/返选/取消全选:

在html 如果一个复选框被选中 是 checked="checked"。

但是我们如果用jquery alert($("#id").attr("checked")) 会提示您是true而不是checked

所以很多朋友判断:

if($("#id").attr("checked")=="true")

这个是错误的,其实应该是:

if($("#id").attr("checked")==true)

例子里面包括了一下几个功能。

<input type="button" id="btn1" value="全选">
<input type="button" id="btn2" value="取消全选">
<input type="button" id="btn3" value="选中所有奇数">
<input type="button" id="btn4" value="反选">
<input type="button" id="btn5" value="获得选中的所有值">

代码

<script src="js/jquery-1.6.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
jQuery(function($){ 
//全选 
$("#btn1").click(function(){ 
$("input[name='checkbox']").attr("checked","true"); 
}) 
//取消全选 
$("#btn2").click(function(){ 
$("input[name='checkbox']").removeAttr("checked"); 
}) 
//选中所有基数 
$("#btn3").click(function(){ 
$("input[name='checkbox']:even").attr("checked","true"); 
}) 
//选中所有偶数 
$("#btn6").click(function(){ 
$("input[name='checkbox']:odd").attr("checked","true"); 
}) 
//反选 
$("#btn4").click(function(){ 
$("input[name='checkbox']").each(function(){ 
if($(this).attr("checked")) 
{ 
$(this).removeAttr("checked"); 
} 
else 
{ 
$(this).attr("checked","true"); 
} 
}) 
}) 
//或许选择项的值 
var aa=""; 
$("#btn5").click(function(){ 
$("input[name='checkbox']:checkbox:checked").each(function(){ 
aa+=$(this).val() 
}) 
document.write(aa); 
}) 
}) 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
<input type="button" id="btn1" value="全选"> 
<input type="button" id="btn2" value="取消全选"> 
<input type="button" id="btn3" value="选中所有奇数"> 
<input type="button" id="btn6" value="选中所有偶数"> 
<input type="button" id="btn4" value="反选"> 
<input type="button" id="btn5" value="获得选中的所有值"> 
<br> 
<input type="checkbox" name="checkbox" value="checkbox1"> checkbox1 
<input type="checkbox" name="checkbox" value="checkbox2"> checkbox2 
<input type="checkbox" name="checkbox" value="checkbox3"> checkbox3 
<input type="checkbox" name="checkbox" value="checkbox4"> checkbox4 
<input type="checkbox" name="checkbox" value="checkbox5"> checkbox5 
<input type="checkbox" name="checkbox" value="checkbox6"> checkbox6 
<input type="checkbox" name="checkbox" value="checkbox7"> checkbox7 
<input type="checkbox" name="checkbox" value="checkbox8"> checkbox8 
</div> 
</form>

jquery 循环读取checkbox值

$("input[type=checkbox][checked]").each(function(){
//由于复选框一般选中的是多个,所以可以循环输出 
alert($(this).val()); 
});
Javascript 相关文章推荐
javascript中的变量是传值还是传址的?
Apr 19 Javascript
分享27款非常棒的jQuery 表单插件
Mar 28 Javascript
jQuery中jqGrid分页实现代码
Nov 04 Javascript
JQuery的$命名冲突详细解析
Dec 28 Javascript
Jquery 实现grid绑定模板
Jan 28 Javascript
Vue开发过程中遇到的疑惑知识点总结
Jan 20 Javascript
JavaScript中的遍历详解(多种遍历)
Apr 07 Javascript
用Vue-cli搭建的项目中引入css报错的原因分析
Jul 20 Javascript
vue实现点击图片放大效果
Aug 15 Javascript
jQuery响应滚动条事件功能示例
Oct 14 jQuery
Vue 之孙组件向爷组件通信的实现
Apr 23 Javascript
bootstrap-table后端分页功能完整实例
Jun 01 Javascript
js提交form表单,并传递参数的实现方法
May 25 #Javascript
用JS动态改变表单form里的action值属性的两种方法
May 25 #Javascript
动态设置form表单的action属性的值的简单方法
May 25 #Javascript
Angularjs过滤器使用详解
May 25 #Javascript
jQuery限制图片大小的方法
May 25 #Javascript
jQuery中设置form表单中action值的实现方法
May 25 #Javascript
使用jquery提交form表单并自定义action的实现代码
May 25 #Javascript
You might like
如何在PHP中使用Oracle数据库(2)
2006/10/09 PHP
Javascript 自适应高度的Tab选项卡
2011/04/05 Javascript
别了 JavaScript中的isXX系列
2012/08/01 Javascript
js 遍历json返回的map内容示例代码
2013/10/29 Javascript
改变隐藏的input中value的值代码
2013/12/30 Javascript
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
2015/04/15 Javascript
jQuery事件绑定on()、bind()与delegate() 方法详解
2015/06/03 Javascript
AngularJS使用angular-formly进行表单验证
2015/12/27 Javascript
jQuery实现的简单拖动层示例
2017/02/22 Javascript
详解vue中computed 和 watch的异同
2017/06/30 Javascript
vue中配置mint-ui报css错误问题的解决方法
2017/10/11 Javascript
关于ES6箭头函数中的this问题
2018/02/27 Javascript
微信小程序中换行空格(多个空格)写法详解
2018/07/10 Javascript
vue实现word,pdf文件的导出功能
2018/07/31 Javascript
vue vue-Router默认hash模式修改为history需要做的修改详解
2018/09/13 Javascript
在微信小程序中渲染HTML内容的方法示例
2018/09/28 Javascript
[52:06]完美世界DOTA2联赛决赛日 Inki vs LBZS 第一场 11.08
2020/11/10 DOTA
python获取标准北京时间的方法
2015/03/24 Python
基于Python os模块常用命令介绍
2017/11/03 Python
利用Tkinter和matplotlib两种方式画饼状图的实例
2017/11/06 Python
解决yum对python依赖版本问题
2019/07/05 Python
python join方法使用详解
2019/07/30 Python
Python实现图片识别加翻译功能
2019/12/26 Python
Python文件操作方法详解
2020/02/09 Python
css3中背景尺寸background-size详解
2014/09/02 HTML / CSS
YesStyle美国/全球:购买亚洲时装、美容化妆品和生活百货
2017/01/16 全球购物
Crocs美国官方网站:卡骆驰洞洞鞋
2017/08/04 全球购物
Black Halo官方网站:购买连衣裙、礼服和连体裤
2018/06/13 全球购物
美津浓巴西官方网站:Mizuno巴西
2019/07/24 全球购物
英国第一独立滑雪板商店:The Snowboard Asylum
2020/01/16 全球购物
健康家庭事迹材料
2014/05/02 职场文书
人口与计划生育目标管理责任书
2014/07/29 职场文书
习总书记三严三实学习心得体会
2014/10/13 职场文书
秦始皇兵马俑导游词
2015/02/02 职场文书
门店店长岗位职责
2015/04/14 职场文书
Redis高级数据类型Hyperloglog、Bitmap的使用
2021/05/24 Redis