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 相关文章推荐
JQuery 常用操作代码
Mar 14 Javascript
悄悄用脚本检查你访问过哪些网站的代码
Dec 04 Javascript
Javascript的闭包详解
Dec 26 Javascript
JavaScript之Object类型介绍
Apr 01 Javascript
jquery分析文本里url或邮件地址为真实链接的方法
Jun 20 Javascript
JS实现网页标题随机显示名人名言的方法
Nov 03 Javascript
浅析JavaScript声明变量
Dec 21 Javascript
基于javascript实现句子翻牌网页版小游戏
Mar 23 Javascript
canvas仿iwatch时钟效果
Mar 06 Javascript
JS中正则表达式全局匹配模式 /g用法详解
Apr 01 Javascript
浅谈react.js 之 批量添加与删除功能
Apr 17 Javascript
Vue自定义过滤器格式化数字三位加一逗号实现代码
Mar 23 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
frename PHP 灵活文件命名函数 frename
2009/09/09 PHP
浅谈apache和nginx的rewrite的区别
2013/02/22 PHP
PHP无限极分类函数的实现方法详解
2017/04/15 PHP
如何学习Javascript入门指导
2013/11/01 Javascript
二叉树的非递归后序遍历算法实例详解
2014/02/07 Javascript
原生JS实现响应式瀑布流布局
2015/04/02 Javascript
js获取表格的行数和列数的方法
2015/10/23 Javascript
JavaScript伪数组用法实例分析
2017/12/22 Javascript
vue.js使用代理和使用Nginx来解决跨域的问题
2018/02/03 Javascript
Node.js 使用AngularJS的方法示例
2018/05/11 Javascript
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
2019/10/11 Javascript
vue 实现单选框设置默认选中值
2019/11/07 Javascript
解决 window.onload 被覆盖的问题方法
2020/01/14 Javascript
vue离开当前页面触发的函数代码
2020/09/01 Javascript
JS数组索引检测中的数据类型问题详解
2021/01/11 Javascript
[01:01:18]VP vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python 批量解压压缩文件的实例代码
2019/06/27 Python
Python Threading 线程/互斥锁/死锁/GIL锁
2019/07/21 Python
Python matplotlib生成图片背景透明的示例代码
2019/08/30 Python
Python算法中的时间复杂度问题
2019/11/19 Python
Python底层封装实现方法详解
2020/01/22 Python
Python ArgumentParse的subparser用法说明
2020/04/20 Python
基于OpenCV的路面质量检测的实现
2020/11/04 Python
Python爬虫自动化爬取b站实时弹幕实例方法
2021/01/26 Python
英国女士家居服网站:hush
2017/08/09 全球购物
Gerry Weber德国官网:优质女性时装,德国最大的时装公司之一
2019/11/02 全球购物
大学生个人求职信范文
2013/09/21 职场文书
优秀班主任经验交流材料
2014/06/02 职场文书
大学毕业生求职自荐书
2014/06/05 职场文书
乡镇干部个人整改措施思想汇报
2014/10/10 职场文书
特种设备安全管理制度
2015/08/06 职场文书
python实现网络五子棋
2021/04/11 Python
MySQL之PXC集群搭建的方法步骤
2021/05/25 MySQL
python析构函数用法及注意事项
2021/06/22 Python
vue使用echarts实现折线图
2022/03/21 Vue.js
Python字符串的转义字符
2022/04/07 Python