var id_array=new Array();
$('input[name="id"]:checked').each(function(){
id_array.push($(this).attr('id'));//向数组中添加元素
});
var idstr=id_array.join(',');//将数组元素连接起来以构建一个字符串
alert(idstr);

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(','));

 
 
 
 

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

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

获取checkbox 的选中状态的id、checkbox的一些操作的更多相关文章

  1. jQuery判断复选框checkbox的选中状态

    通过jQuery设置复选框为选中状态 复选框 <input type="checkbox"/> 错误代码: $("input").attr(&quo ...

  2. 获取select标签选中状态 的label的值。

    <select name="procode" onchange="alert(this.options[this.selectedIndex].text)" ...

  3. html5中checkbox的选中状态的设置与获取

    获取checkbox是否选中: $("#checkbox").is(":checked"); 获得的值为true或false. 设置checkbox是否选中: ...

  4. ASP.NET 中关GridView里加入CheckBox 在后台获取不到选中状态的问题

    <!-- 在GridView里添加CheckBox选择控件 !--> <ItemTemplate> <asp:CheckBox ID="CheckBox&quo ...

  5. CheckBox 半选中状态

    <input type='checkbox' />可以半选中,这个特性,很多浏览器都支持,包括Firefox,Chrome和IE 用 input.indeterminate 这个属性来获取 ...

  6. android checkbox 未选中状态 已选中状态 替换成自己的图片

    效果图: 未选中状态: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA ...

  7. checkBox半选中状态

    checkbox 可以半选中,这个特性,很多浏览器都支持 // 用 input.indeterminate 这个属性来获取或者设置半选中状态,必须要用 js 添加属性,才有效果. input.inde ...

  8. angularJS处理table中checkbox的选中状态

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. jQ无法设置checkbox变成选中状态

    设置以后checkbox并没有变成选中状态,用chrome调试看了一下,checkbox中确实有checked属性,针对这个问题,大家可以参考下本文 代码如下: $("input" ...

随机推荐

  1. C#5 复习总结循环 迭代和穷举

    一.章节复习: 循环.反复执行某段语句一种语法形式. 1.基本语法: for( 初始条件 ; 循环条件 ; 状态的改变 ) { 循环体 } 循环的四要素. 循环的执行过程.初始条件--循环条件--循环 ...

  2. Sql Server数据库设计高级查询

    -------------------------------------第一章  数据库的设计------------------------------------- 软件开发周期:     (1 ...

  3. HDU 3030 - Increasing Speed Limits

    Problem Description You were driving along a highway when you got caught by the road police for spee ...

  4. HDU 1045(Fire Net)题解

    以防万一,题目原文和链接均附在文末.那么先是题目分析: [一句话题意] 给定大小的棋盘中部分格子存在可以阻止互相攻击的墙,问棋盘中可以放置最多多少个可以横纵攻击炮塔. [题目分析] 这题本来在搜索专题 ...

  5. css实现两端对齐的3种方法

    两端对齐在移动端非常见,说到两端对齐,大家并不陌生,在word.powerpoint.outlook等界面导航处,其实都有一个两端对齐(分散对齐)的按钮,平时使用的也不多,我们更习惯与左对齐.居中对齐 ...

  6. CentOS 7 上搭建LNMP环境

    (转自美团云知识库Chris) 简介 LNMP是Linux.Nginx.MySQL(MariaDB)和PHP的缩写,这个组合是最常见的WEB服务器的运行环境之一.本文将带领大家在CentOS 7操作系 ...

  7. PhpStorm 4.0 & 5.0 部署本地Web应用

    1.创建新的项目(project),创建完成之后单击工具栏的应用运行/调试(Select Run/Debug Configuration)的下拉菜单弹出 Edit Cofigurations选项,单击 ...

  8. Sass使用教程

    sass官网: http://sass-lang.com/ http://sass-lang.com/documentation/file.SASS_REFERENCE.html Sass和Scss的 ...

  9. Azure 为 SAP 提供的增强监控解决方案

    正如大家在之前公告中所看到的,多个SAP应用程序已获得认证可在 Azure虚拟机中运行,未来还会有更多 SAP应用程序获得认证.对于希望在 Azure中运行 SAP应用程序的客户来说,这是个激动人心的 ...

  10. SELinux开关导致mysql服务启动不了

    http://www.jb51.net/article/36187.htm 网站突然连接不上数据库,于是朋友直接重启了一下服务器.进到cli模式下,执行 service myqsld start 发现 ...