2021-7-22 前端达人
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(','));
文章来源：csdn
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com