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. css渐变/背景

    1.线性渐变(gradient变化) linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果. 上图是从黄色渐变到绿色 background:linear-gradient( to ...

  2. HTML及CSS常用颜色英文词汇

    黑色 银色 灰色 白色 茶色 红色 紫色 紫红 black silver gray white maroon red purple fuchsia #000000 #C0C0C0 #808080 #F ...

  3. Inno setup complier将文件添加注册表

    [Registry] Root: HKCR; Subkey:.; ValueType: string; ValueName: ; ValueData:"264file" Root: ...

  4. C# 几种退出程序的方式

    C# WinForm程序退出的方法 1.this.Close(); 只是关闭当前窗口,若不是主窗体的话,是无法退出程序的,另外若有托管线程(非主线程),也无法干净地退出: 2.Application. ...

  5. week 与 strong区别 精辟的解释

    转:http://stackoverflow.com/questions/9262535/explanation-of-strong-and-weak-storage-in-ios5 觉得讲的很容易理 ...

  6. jupyter巨好玩-常用设置

    整理一下有用的设置: 自定义ipython工作目录 用jupyter notebook默认打开的页面时,默认在的是home路径,会看见一大堆东西,假如我们只想展示jupyter的工程目录咋办? 简单说 ...

  7. skynet的流程2

    http://blog.csdn.net/xiarendeniao/article/details/38613161 http://www.jiandan.ren/2015/06/skynet-hel ...

  8. JQuery DataTables Editor---只修改页面内容

    近来在工作中需要对JQuery DataTables进行增,删,改的操作,在网上找了一些资料,感觉比较的好的就是(http://editor.datatables.net/)文章中所展示的操作方法(如 ...

  9. html5介绍

    html5与html4的区别   (h5 and h4)   什么是OPOA   1,    浏览器对h5的支持情况 2,    历史 --- h5         2004年,whatwg 提出 w ...

  10. J2SE知识点摘记(一)

    1.        数组的声明时无法指定数组的长度. 2.        一维数组的声明和内存的分配 "数据类型    数组名[]; //声明一维数组     数组名=  new 数据类型[ ...