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 相关文章推荐
在Ajax中使用Flash实现跨域数据读取的实现方法
Dec 02 Javascript
EXTJS记事本 当CompositeField遇上RowEditor
Jul 31 Javascript
js confirm()方法的使用方法实例
Jul 13 Javascript
jquery根据锚点offset值实现动画切换
Sep 11 Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
Sep 16 Javascript
jQuery实现的超简单点赞效果实例分析
Dec 31 Javascript
Canvas实现放射线动画效果
Feb 15 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
Nov 22 Javascript
用原生 JS 实现 innerHTML 功能实例详解
Apr 03 Javascript
微信小程序bindtap事件与冒泡阻止详解
Aug 08 Javascript
JS一次前端面试经历记录
Mar 19 Javascript
vue移动端写的拖拽功能示例代码
Sep 09 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 将图片按创建时间进行分类存储的实现代码
2010/01/05 PHP
PHP中include()与require()的区别说明
2017/02/14 PHP
PHP 7安装调试工具Xdebug扩展的方法教程
2017/06/17 PHP
addEventListener 的用法示例介绍
2014/05/07 Javascript
Javascript Memoizer浅析
2014/10/16 Javascript
jquery动态改变div宽度和高度
2015/02/09 Javascript
JQuery CheckBox(复选框)操作方法汇总
2015/04/15 Javascript
详解Matlab中 sort 函数用法
2016/03/20 Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
2017/11/11 jQuery
Vue.js与 ASP.NET Core 服务端渲染功能整合
2017/11/16 Javascript
vue基础之v-bind属性、class和style用法分析
2019/03/11 Javascript
Vue CLI3基础学习之pages构建多页应用
2019/06/02 Javascript
jQuery中DOM常见操作实例小结
2019/08/01 jQuery
更优雅的微信小程序骨架屏实现详解
2019/08/07 Javascript
Layui 带多选框表格监听事件以及按钮自动点击写法实例
2019/09/02 Javascript
JS+html5实现异步上传图片显示上传文件进度条功能示例
2019/11/09 Javascript
python里大整数相乘相关技巧指南
2014/09/12 Python
Python中处理字符串之islower()方法的使用简介
2015/05/19 Python
Python正则表达式和元字符详解
2018/11/29 Python
对python的bytes类型数据split分割切片方法
2018/12/04 Python
解决Python pandas plot输出图形中显示中文乱码问题
2018/12/12 Python
python判断一个数是否能被另一个整数整除的实例
2018/12/12 Python
tensorflow没有output结点,存储成pb文件的例子
2020/01/04 Python
浅析python 通⽤爬⾍和聚焦爬⾍
2020/09/28 Python
python实现发送QQ邮件(可加附件)
2020/12/23 Python
HTML5边玩边学(1)画布实现方法
2010/09/21 HTML / CSS
基于canvas的骨骼动画的示例代码
2018/06/12 HTML / CSS
Tirendo比利时:在线购买轮胎
2018/10/22 全球购物
Paper Cape官网:美国婴儿和儿童服装品牌
2019/11/02 全球购物
乌克兰第一的珠宝网上商店:Gold.ua
2019/11/29 全球购物
《落花生》教学反思
2014/02/25 职场文书
2014年大学班级工作总结
2014/11/14 职场文书
贷款担保书
2015/01/20 职场文书
2015暑期爱心支教策划书
2015/07/14 职场文书
汽车销售合同文本
2019/08/08 职场文书
python scrapy简单模拟登录的代码分析
2021/07/21 Python