jquery对复选框(checkbox)的操作汇总

query操作复选框(checkbox)的12个小技巧。

1、获取单个checkbox选中项(三种写法)

?

1	$( "input:checkbox:checked" ).val()

或者

?

1	$( "input:[type='checkbox']:checked" ).val();

或者

?

1	$( "input:[name='ck']:checked" ).val();

2、 获取多个checkbox选中项

?

1 2 3 4 5

$( 'input:checkbox' ).each( function () { if ($( this ).attr( 'checked' ) == true ) { alert($( this ).val()); } });

3、设置第一个checkbox 为选中值

?

1	$( 'input:checkbox:first' ).attr( "checked" , 'checked' );

或者

?

1	$( 'input:checkbox' ).eq(0).attr( "checked" , 'true' );

4、设置最后一个checkbox为选中值

?

1	$( 'input:radio:last' ).attr( 'checked' , 'checked' );

或者

?

1	$( 'input:radio:last' ).attr( 'checked' , 'true' );

5、根据索引值设置任意一个checkbox为选中值

?

1	$( 'input:checkbox).eq(索引值).attr(' checked ', ' true ');

索引值=0,1,2....
或者

?

1	$( 'input:radio' ).slice(1,2).attr( 'checked' , 'true' );

6、选中多个checkbox同时选中第1个和第2个的checkbox

?

1	$( 'input:radio' ).slice(0,2).attr( 'checked' , 'true' );

7、根据Value值设置checkbox为选中值

?

1	$( "input:checkbox[value='1']" ).attr( 'checked' , 'true' );

8、删除Value=1的checkbox

?

1	$( "input:checkbox[value='1']" ).remove();

9、删除第几个checkbox

?

1	$( "input:checkbox" ).eq(索引值).remove();

索引值=0,1,2....
如删除第3个checkbox:

?

1	$( "input:checkbox" ).eq(2).remove();

10、遍历checkbox

?

1 2 3

$( 'input:checkbox' ).each( function (index, domEle) { //写入代码 });

11、全部选中

?

1 2 3

$( 'input:checkbox' ).each( function () { $( this ).attr( 'checked' , true ); });

12、全部取消选择

?

1 2 3

$( 'input:checkbox' ).each( function () { $( this ).attr( 'checked' , false ); });

JQuery对CheckBox的一些相关操作

一、通过选择器选取CheckBox:

  1.给CheckBox设置一个id属性，通过id选择器选取：

 

?

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

    JQuery:

?

1	$( "#chkOne" ).click( function (){});

   2.给CheckBox设置一个class属性，通过类选择器选取：

?

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

    JQuery:

?

1 2	$( ".chkTwo" ).click( function (){});

  3.通过标签选择器和属性选择器来选取：

?

1 2	< input type = "checkbox" name = "someBox" value = "1" checked = "checked" /> < input type = "checkbox" name = "someBox" value = "2" />

   JQuery:

?

1 2	$( "input[name='someBox']" ).click( function (){});

二、对CheckBox的操作：
   以这段checkBox代码为例：

?

1 2 3 4

< 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()方法：

?

1	$( "input[name='box']" ).each( function (){});

   2.设置checkbox被选中用attr();方法：

?

1 2	$( "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的值：

?

1 2 3 4

$( "input[name='box'][checked]" ).each( function (){ if ( true == $( this ).attr( "checked" )) {     alert( $( this ).attr( 'value' ) ); }

     或者：

?

1 2 3 4

$( "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的值：

?

1 2 3 4 5

$( "input[name='box']" ).each( function (){     if ($( this ).attr( 'checked' ) == false ) {        alert($( this ).val());      }   });

   5.设置checkbox的value属性的值:

?

1	$( this ).attr( "value" ,值);

三、 一般都是创建一个js数组来存储遍历checkbox得到的值，创建js数组的方法：

     1.  var array= new Array();

     2. 往数组添加数据：

        array.push($(this).val());

     3.数组以“,”分隔输出：

         alert(array.join(','));