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 相关文章推荐
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
Dec 02 Javascript
jQuery EasyUI 中文API Layout(Tabs)
Apr 27 Javascript
JavaScript面向对象程序设计三 原型模式(上)
Dec 21 Javascript
用javascript关闭本窗口技巧小结
Sep 05 Javascript
seajs加载jquery时提示$ is not a function该怎么解决
Oct 23 Javascript
jQuery easyui刷新当前tabs的方法
Sep 23 Javascript
jquery将标签元素的高设为屏幕的百分比
Apr 19 jQuery
MVVM 双向绑定的实现代码
Jun 21 Javascript
浅谈Vue组件及组件的注册方法
Aug 24 Javascript
mpvue中使用flyjs全局拦截的实现代码
Sep 13 Javascript
使用JavaScript解析URL的方法示例
Mar 01 Javascript
JavaScript多种图形实现代码实例
Jun 28 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
ecshop实现smtp发送邮件
2015/02/03 PHP
PHP 实现浏览记录并按日期分组
2017/05/11 PHP
使用composer命令加载vendor中的第三方类库 的方法
2019/07/09 PHP
jquery向.ashx文件post中文乱码问题的解决方法
2011/03/28 Javascript
JavaScript实现按Ctrl键打开新页面
2014/09/04 Javascript
node.js中的fs.writeFileSync方法使用说明
2014/12/14 Javascript
Angularjs基础知识及示例汇总
2015/01/22 Javascript
Javascript编程之继承实例汇总
2015/11/28 Javascript
理解JS绑定事件
2016/01/19 Javascript
很棒的js选项卡切换效果
2016/07/15 Javascript
js前端实现多图图片上传预览的两个方法(推荐)
2016/11/18 Javascript
深入理解javascript函数参数与闭包
2016/12/12 Javascript
Bootstrap CSS使用方法
2016/12/23 Javascript
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
2018/02/06 Javascript
JS严格模式知识点总结
2018/02/27 Javascript
Vue表单类的父子组件数据传递示例
2018/05/03 Javascript
python中List的sort方法指南
2014/09/01 Python
python3 实现的人人影视网站自动签到
2016/06/19 Python
python正则表达式的使用
2017/06/12 Python
python通过socket实现多个连接并实现ssh功能详解
2017/11/08 Python
浅谈python常用程序算法
2019/03/22 Python
python3中eval函数用法使用简介
2019/08/02 Python
详解python3中用HTMLTestRunner.py报ImportError: No module named 'StringIO'如何解决
2019/08/27 Python
Python函数参数定义及传递方式解析
2020/06/10 Python
django restframework serializer 增加自定义字段操作
2020/07/15 Python
python代码能做成软件吗
2020/07/24 Python
Python列表推导式实现代码实例
2020/09/09 Python
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
2014/07/21 HTML / CSS
HTML5移动端开发中的Viewport标签及相关CSS用法解析
2016/04/15 HTML / CSS
Speedo澳大利亚官网:全球领先游泳品牌
2018/02/04 全球购物
Zooplus葡萄牙:欧洲领先的网上宠物商店
2018/07/01 全球购物
应届生高等护理求职信
2013/10/12 职场文书
普通员工辞职信
2014/01/17 职场文书
2015年乡镇人大工作总结
2015/04/22 职场文书
元旦晚会主持词开场白
2015/05/28 职场文书
Opencv中cv2.floodFill算法的使用
2021/06/18 Python