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 相关文章推荐
jQuery 源码分析笔记(6) jQuery.data
Jun 08 Javascript
基于jquery的滚动鼠标放大缩小图片效果
Oct 27 Javascript
设为首页加入收藏兼容360/火狐/谷歌/IE等主流浏览器的代码
Mar 26 Javascript
Jquery遍历节点的方法小集
Jan 22 Javascript
AngularJS控制器详解及示例代码
Aug 16 Javascript
js代码实现下拉菜单【推荐】
Dec 15 Javascript
Bootstrap3 内联单选和多选框
Dec 29 Javascript
JS监控关闭浏览器操作的实例详解
Sep 12 Javascript
Jquery实现获取子元素的方法分析
Aug 24 jQuery
Vue 实现显示/隐藏层的思路(加全局点击事件)
Dec 31 Javascript
基于JavaScript判断两个对象内容是否相等
Jan 10 Javascript
微信小程序单选框自定义赋值
May 26 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基于表单密码验证与HTTP验证用法实例
2015/01/06 PHP
Ubuntu下安装PHP的mongodb扩展操作命令
2015/07/04 PHP
详解PHP数组赋值方法
2015/11/07 PHP
PHP实现批量重命名某个文件夹下所有文件的方法
2017/09/04 PHP
php语言注释,单行注释和多行注释
2018/01/21 PHP
javascript的键盘控制事件说明
2008/04/15 Javascript
jquery中选择块并改变属性值的方法
2013/07/31 Javascript
js写的评论分页(还不错)
2013/12/23 Javascript
jQuery soColorPacker 网页拾色器
2016/06/22 Javascript
jQuery实现ajax的叠加和停止(终止ajax请求)
2016/08/08 Javascript
JS实现图片剪裁并预览效果
2016/08/12 Javascript
微信小程序 页面跳转和数据传递实例详解
2017/01/19 Javascript
Node.js获取前端ajax提交的request信息
2017/02/20 Javascript
JavaScript代码判断输入的字符串是否含有特殊字符和表情代码实例
2017/08/17 Javascript
Vue 自定义指令实现一键 Copy功能
2019/09/16 Javascript
uniapp实现可滑动选项卡
2020/10/21 Javascript
[02:25]DOTA2英雄基础教程 熊战士
2014/01/03 DOTA
[37:35]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第二局
2016/02/25 DOTA
[10:18]2018DOTA2国际邀请赛寻真——Fnatic能否笑到最后?
2018/08/14 DOTA
python实现定时播放mp3
2015/03/29 Python
python实现年会抽奖程序
2019/01/22 Python
python mysql断开重连的实现方法
2019/07/26 Python
Python使用APScheduler实现定时任务过程解析
2019/09/11 Python
Python 实现自动获取种子磁力链接方式
2020/01/16 Python
使用Python爬取小姐姐图片(beautifulsoup法)
2021/02/11 Python
移动端适配 使px自动转换rem
2019/08/26 HTML / CSS
HTML5获取当前地理位置并在百度地图上展示的实例
2020/07/10 HTML / CSS
应届毕业生个人自我评价
2013/09/20 职场文书
行政办公员自我评价分享
2013/12/14 职场文书
工作人员思想汇报
2014/01/09 职场文书
高考励志标语
2014/06/05 职场文书
班级标语大全
2014/06/21 职场文书
干货:如何写好观后感 !
2019/05/21 职场文书
matlab xlabel位置的设置方式
2021/05/21 Python
vue实现水波涟漪效果的点击反馈指令
2021/05/31 Vue.js
MySQL一劳永逸永久支持输入中文的方法实例
2022/08/05 MySQL