jquery对复选框(checkbox)的操作汇总


Posted in Javascript onJanuary 13, 2016

jquery操作复选框(checkbox)的12个小技巧。

1、获取单个checkbox选中项(三种写法)

$("input:checkbox:checked").val()

或者

$("input:[type='checkbox']:checked").val();

或者

$("input:[name='ck']:checked").val();

2、 获取多个checkbox选中项

$('input:checkbox').each(function() {
if ($(this).attr('checked') ==true) {
alert($(this).val());
}
});

3、设置第一个checkbox 为选中值

$('input:checkbox:first').attr("checked",'checked');

或者

$('input:checkbox').eq(0).attr("checked",'true');

4、设置最后一个checkbox为选中值

$('input:radio:last').attr('checked', 'checked');

或者

$('input:radio:last').attr('checked', 'true');

5、根据索引值设置任意一个checkbox为选中值

$('input:checkbox).eq(索引值).attr('checked', 'true');

索引值=0,1,2....
或者

$('input:radio').slice(1,2).attr('checked', 'true');

6、选中多个checkbox同时选中第1个和第2个的checkbox

$('input:radio').slice(0,2).attr('checked','true');

7、根据Value值设置checkbox为选中值

$("input:checkbox[value='1']").attr('checked','true');

8、删除Value=1的checkbox

$("input:checkbox[value='1']").remove();

9、删除第几个checkbox

$("input:checkbox").eq(索引值).remove();

索引值=0,1,2....
如删除第3个checkbox:

$("input:checkbox").eq(2).remove();

10、遍历checkbox

$('input:checkbox').each(function (index, domEle) {
//写入代码
});

11、全部选中

$('input:checkbox').each(function() {
$(this).attr('checked', true);
});

12、全部取消选择

$('input:checkbox').each(function () {
$(this).attr('checked',false);
});

JQuery对CheckBox的一些相关操作

一、通过选择器选取CheckBox:

  1.给CheckBox设置一个id属性,通过id选择器选取:

 

<input type="checkbox" name="myBox" id="chkOne" value="1" checked="checked" />

    JQuery:

$("#chkOne").click(function(){});

   2.给CheckBox设置一个class属性,通过类选择器选取:

<input type="checkbox" name="myBox" class="chkTwo" value="1" checked="checked" />

    JQuery:

$(".chkTwo").click(function(){});

  3.通过标签选择器和属性选择器来选取:

<input type="checkbox" name="someBox" value="1" checked="checked" />
  <input type="checkbox" name="someBox" value="2" />

   JQuery:

$("input[name='someBox']").click(function(){});

二、对CheckBox的操作:
   以这段checkBox代码为例:

<input type="checkbox" name="box" value="0" checked="checked" />
  <input type="checkbox" name="box" value="1" />
  <input type="checkbox" name="box" value="2" />
  <input type="checkbox" name="box" value="3" />

   1.遍历checkbox用each()方法:

$("input[name='box']").each(function(){});

   2.设置checkbox被选中用attr();方法:

$("input[name='box']").attr("checked","checked");

    在HTML中,如果一个复选框被选中,对应的标记为 checked="checked"。 但如果用jquery alert($("#id").attr("checked")) 则会提示您是"true"而不是"checked",所以判断 if("checked"==$("#id").attr("checked")) 是错误的,应该是 if(true == $("#id").attr("checked"))
 
  3.获取被选中的checkbox的值:

$("input[name='box'][checked]").each(function(){
  if (true == $(this).attr("checked")) {
     alert( $(this).attr('value') );
  }

     或者:

$("input[name='box']:checked").each(function(){
  if (true == $(this).attr("checked")) {
     alert( $(this).attr('value') );
  }

   $("input[name='box']:checked")与 $("input[name='box']")有何区别没试过,我试了用 $("input[name='box']")能成功。
   4.获取未选中的checkbox的值:

$("input[name='box']").each(function(){
     if ($(this).attr('checked') ==false) {
        alert($(this).val());
      }
   });

   5.设置checkbox的value属性的值:

$(this).attr("value",值);

三、 一般都是创建一个js数组来存储遍历checkbox得到的值,创建js数组的方法:

     1.  var array= new Array();

     2. 往数组添加数据:

        array.push($(this).val());

     3.数组以“,”分隔输出:

         alert(array.join(','));

Javascript 相关文章推荐
Prototype源码浅析 String部分(三)之HTML字符串处理
Jan 15 Javascript
js数组方法扩展实现数组统计函数
Apr 09 Javascript
jquery mobile的触控点击事件会多次触发问题的解决方法
May 08 Javascript
JavaScript设计模式之外观模式实例
Oct 10 Javascript
JQuery中DOM事件冒泡实例分析
Jun 13 Javascript
JSON与XML优缺点对比分析
Jul 17 Javascript
jQuery基于扩展简单实现倒计时功能的方法
May 14 Javascript
JQuery 在文档中查找指定name的元素并移除的实现方法
May 19 Javascript
jQuery实现鼠标滑过图片移动特效
Dec 08 Javascript
vue中进行微博分享的实例讲解
Oct 14 Javascript
小程序实现列表倒计时功能
Jan 29 Javascript
node.js使用express-fileupload中间件实现文件上传
Jul 16 Javascript
分享javascript计算时间差的示例代码
Mar 19 #Javascript
学习JavaScript设计模式之代理模式
Jan 12 #Javascript
基于JavaScript实现TAB标签效果
Jan 12 #Javascript
JavaScript实现瀑布流布局
Jun 28 #Javascript
轻松实现JavaScript图片切换
Jan 12 #Javascript
jQuery动画效果图片轮播特效
Jan 12 #Javascript
jQuery动画效果实现图片无缝连续滚动
Jan 12 #Javascript
You might like
使用PHP静态变量当缓存的方法
2013/11/13 PHP
php遍历文件夹所有文件子文件夹函数代码
2013/11/27 PHP
php实现网站顶踩功能的完整前端代码
2015/07/19 PHP
CI框架简单邮件发送类实例
2016/05/18 PHP
PHP识别二维码的方法(php-zbarcode安装与使用)
2016/07/07 PHP
Yii 访问 Gii(脚手架)时出现 403 错误
2018/06/06 PHP
Auntion-TableSort国人写的一个javascript表格排序的东西
2007/11/12 Javascript
javascript 选择文件夹对话框(web)
2009/07/07 Javascript
用jquery写的一个万年历(自写)
2014/01/20 Javascript
简介JavaScript中用于处理正切的Math.tan()方法
2015/06/15 Javascript
jquery实现select选择框内容左右移动代码分享
2015/11/21 Javascript
jQuery实现Tab选项卡切换效果简单演示
2015/11/23 Javascript
解析JavaScript模仿块级作用域
2016/12/29 Javascript
jQuery ajax的功能实现方法详解
2017/01/06 Javascript
javascript数据类型详解
2017/02/07 Javascript
深入理解vue Render函数
2017/07/19 Javascript
使用node.js对音视频文件加密的实例代码
2017/08/30 Javascript
nodejs aes 加解密实例
2018/10/10 NodeJs
[04:00]DOTA2解说界神雕侠侣 CJ第四天谷子现场过生日
2013/07/30 DOTA
[45:17]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第三场 1月9日
2021/03/11 DOTA
python使用rsa加密算法模块模拟新浪微博登录
2014/01/22 Python
pyqt5 获取显示器的分辨率的方法
2019/06/18 Python
python文件转为exe文件的方法及用法详解
2019/07/08 Python
python 输入字符串生成所有有效的IP地址(LeetCode 93号题)
2020/10/15 Python
canvas学习总结三之绘制路径-线段
2019/01/31 HTML / CSS
纽约家具、家居装饰和地毯店:ABC Carpet & Home
2017/06/21 全球购物
英国第一豪华护肤品牌:Elemis
2017/10/12 全球购物
德国户外商店:eXXpozed
2020/07/25 全球购物
大学生应聘自荐信
2013/10/11 职场文书
一份创业计划书范文
2014/02/08 职场文书
爱祖国演讲稿
2014/05/04 职场文书
甜品蛋糕店创业计划书
2014/09/21 职场文书
群众路线领导班子整改方案
2014/10/25 职场文书
2016年企业安全生产月活动总结
2016/04/06 职场文书
一篇文章带你学习Mybatis-Plus(新手入门)
2021/08/02 Java/Android
JavaScript原型链中函数和对象的理解
2022/06/16 Javascript