一、通过选择器选取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(','));

 
 
 
 

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

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

JQuery对CheckBox的一些相关操作的更多相关文章

  1. jQuery获取checkbox选中项等操作及注意事项

    jQuery获取checkbox选中项等操作及注意事项 今天在做一个项目功能时需要显示checkbox选项来让用户进行选择,由于前端不是很熟练,所以做了一个简单的Demo,其中遇到一些小问题,特记录下 ...

  2. 前端学习笔记(zepto或jquery)——对li标签的相关操作(二)

    对li标签的相关操作——8种方式获取li标签的第一个元素的内容 1.alert($("ul>li").first().html());2.alert($('ul>li' ...

  3. 前端学习笔记(zepto或jquery)——对li标签的相关操作(五)

    对li标签的相关操作——has与find的差异性 demo代码: <ul> <li><p>1</p></li> <li>2< ...

  4. 前端学习笔记(zepto或jquery)——对li标签的相关操作(四)

    对li标签的相关操作——五种方式给奇数项li标签设置样式 demo演示: 1 2 3 4 5 6 7 // 详解: 通常我们为多个li添加样式时常用的是使用filter,但我们在第三节中可以看到fil ...

  5. 前端学习笔记(zepto或jquery)——对li标签的相关操作(三)

    对li标签的相关操作——八种方式遍历li标签并获取其值 $("ul>li").forEach(function(item,index){ alert(index+" ...

  6. 前端学习笔记(zepto或jquery)——对li标签的相关操作(一)

    对li标签的相关操作——点击li标签进行样式切换的两种方式 Demo演示: 1 2 3 4 // 详解: 第一种方式(以ul为基础): $("ul").bind("cli ...

  7. [开发笔记]-jQuery获取checkbox选中项等操作及注意事项

    今天在做一个项目功能时需要显示checkbox选项来让用户进行选择,由于前端不是很熟练,所以做了一个简单的Demo,其中遇到一些小问题,特记录下来,希望能帮到遇到类似问题的同学们. 1. 获取chec ...

  8. checkbox,radio,selected相关操作

    1.radio:单选框 HTML代码: <input type="radio" name="radio" id="radio1" va ...

  9. jQuery监听键盘事件及相关操作使用教程

    一.首先需要知道的是: 1.keydown() keydown事件会在键盘按下时触发. 2.keyup() keyup事件会在按键释放时触发,也就是你按下键盘起来后的事件 3.keypress() k ...

随机推荐

  1. commitizen和cz-customizable配置git commit message

    起因 团队对提交的commit message格式有约定俗称的要求,但是没有一个统一的规范,导致大家提交的commit message或多或少不太一样.因此,需要一个工具来帮助大家统一commit m ...

  2. 父类与子类this相关问题

    1.SinglyLinkedList: package No3_PolySinglyList; /*实现 带头结点的单链表SinglyLinkedList类*/ public class Singly ...

  3. Notes of Daily Scrum Meeting(11.12)

    今天我们召开了Beta阶段MOOC项目开发的第一次Scrum Meeting,在会上就alpha阶段进行了总结,然后我们确定了 接下来的Beta阶段的项目分工,并且就每天的进度汇报做了一个约定,就是每 ...

  4. java入门--4110:圣诞老人的礼物-Santa Clau’s Gifts

    学习了一下java的语法,就用poj上的题目做作练习,好更快的熟悉常用的java语法. 题目在这里 http://bailian.openjudge.cn/practice/4110/ import ...

  5. Day Two

    站立式会议 站立式会议内容总结 442 完成了计划列表和toolbar的事件监听部分 遇到问题:父组无法实现事件监听,只能实现点击折叠.展开的功能. 331 学习form中list数据添加 遇到的问题 ...

  6. Vue 和 angular

    vue适合移动端的项目,而angular更适合运用于Pc端的项目.

  7. PAT 甲级 1068 Find More Coins

    https://pintia.cn/problem-sets/994805342720868352/problems/994805402305150976 Eva loves to collect c ...

  8. Android Tab类型主界面 Fragment+TabPageIndicator+ViewPager

    文章地址: Android项目Tab类型主界面大总结 Fragment+TabPageIndicator+ViewPager 1.使用ViewPager + PagerAdapter 每个页面的内容都 ...

  9. webpack 搭建vue项目流程

    1.安装node 2.打开命令行输入  npm install -g vue-cli 3.vue init webpack-simple vue 4.各种确认(enter键) 5.npm instal ...

  10. Oracle 查看正在执行的SQL语句

    SELECT A.MACHINE, username,a.SID,a.SERIAL#, sql_text,LOGON_TIME from v$session a, v$sql b where a.sq ...