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 相关文章推荐
使用javascipt---实现二分查找法
Apr 10 Javascript
javascript和HTML5利用canvas构建猜牌游戏实现算法
Jul 17 Javascript
Js实现动态添加删除Table行示例
Apr 14 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
Sep 11 Javascript
js显示当前日期时间和星期几
Oct 22 Javascript
深入理解JavaScript内置函数
Jun 03 Javascript
prototype.js常用函数详解
Jun 18 Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
Jan 20 Javascript
react koa rematch 如何打造一套服务端渲染架子
Jun 26 Javascript
Vuex模块化应用实践示例
Feb 03 Javascript
js实现双色球效果
Aug 02 Javascript
解决Vue-Router升级导致的Uncaught (in promise)问题
Aug 07 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 pathinfo()获得文件的路径、名称等信息说明
2011/09/13 PHP
Laravel5.1 框架数据库操作DB运行原生SQL的方法分析
2020/01/07 PHP
dojo 之基础篇
2007/03/24 Javascript
Prototype Template对象 学习
2009/07/19 Javascript
jQuery 使用手册(六)
2009/09/23 Javascript
在javascript将NodeList作为Array数组处理的方法
2010/07/09 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
2011/06/27 Javascript
javascript的字符串按引用复制和传递,按值来比较介绍与应用
2012/12/28 Javascript
可选择和输入的下拉列表框示例
2013/11/05 Javascript
JS实现的一个简单的Autocomplete自动完成例子
2014/04/16 Javascript
自编jQuery插件实现模拟alert和confirm
2014/09/01 Javascript
jquery实现侧边弹出的垂直导航
2014/12/09 Javascript
js实现仿QQ秀换装效果的方法
2015/03/04 Javascript
jQuery实现仿美橙互联两级导航菜单的方法
2015/03/09 Javascript
深入解析JavaScript的闭包机制
2015/10/20 Javascript
JS实现网页上随滚动条滚动的层效果代码
2015/11/04 Javascript
jQuery实现碰到边缘反弹的动画效果
2018/02/24 jQuery
JavaScript中AOP的实现与应用
2019/05/06 Javascript
通过js示例讲解时间复杂度与空间复杂度
2019/08/06 Javascript
用Python脚本来删除指定容量以上的文件的教程
2015/05/04 Python
Django查找网站项目根目录和对正则表达式的支持
2015/07/15 Python
python的pdb调试命令的命令整理及实例
2017/07/12 Python
Flask解决跨域的问题示例代码
2018/02/12 Python
浅析Python四种数据类型
2018/09/26 Python
Python 根据数据模板创建shapefile的实现
2019/11/26 Python
pyautogui自动化控制鼠标和键盘操作的步骤
2020/04/01 Python
matplotlib更改窗口图标的方法示例
2021/02/03 Python
CSS3中新增的对文本和字体的设置
2020/02/03 HTML / CSS
美国在线面料商店:Fashion Fabrics Club
2020/01/31 全球购物
仓库管理员岗位职责
2014/03/19 职场文书
ktv筹备计划书
2014/05/03 职场文书
2014年劳动部工作总结
2014/12/11 职场文书
青年岗位能手事迹材料
2014/12/23 职场文书
学习委员竞选稿
2015/11/20 职场文书
一篇文章看懂MySQL主从复制与读写分离
2021/11/07 MySQL
ipad隐藏软件app图标方法
2022/04/19 数码科技