jQuery对checkbox的各种操作
jQuery 操作 各种 checkbox
2023-09-27 14:21:32 时间
//注意: 操作checkbox的checked,disabled属性时jquery1.6以前版本用attr,1.6以上(包含)建议用prop
//1、根据id获取checkbox
$(
"#cbCheckbox1"
);
//2、获取所有的checkbox
$(
"input[type='checkbox']"
);
//or
$(
"input[name='cb']"
);
//3、获取所有选中的checkbox
$(
"input:checkbox:checked"
);
//or
$(
"input:[type='checkbox']:checked"
);
//or
$(
"input[type='checkbox']:checked"
);
//or
$(
"input:[name='ck']:checked"
);
//4、获取checkbox值
//用.val()即可,比如:
$(
"#cbCheckbox1"
).val();
//5、获取多个选中的checkbox值
var
vals = [];
$(
'input:checkbox:checked'
).each(
function
(index, item) {
vals.push($(
this
).val());
});
//6、判断checkbox是否选中(jquery 1.6以前版本 用 $(this).attr("checked"))
$(
"#cbCheckbox1"
).click(
function
() {
if
($(
this
).prop(
"checked"
)) {
alert(
"选中"
);
}
else
{
alert(
"没有选中"
);
}
});
//7、设置checkbox为选中状态
$(
'input:checkbox'
).attr(
"checked"
,
'checked'
);
//or
$(
'input:checkbox'
).attr(
"checked"
,
true
);
//8、设置checkbox为不选中状态
$(
'input:checkbox'
).attr(
"checked"
,
''
);
//or
$(
'input:checkbox'
).attr(
"checked"
,
false
);
//9、设置checkbox为禁用状态(jquery<1.6用attr,jquery>=1.6建议用prop)
$(
"input[type='checkbox']"
).attr(
"disabled"
,
"disabled"
);
//or
$(
"input[type='checkbox']"
).attr(
"disabled"
,
true
);
//or
$(
"input[type='checkbox']"
).prop(
"disabled"
,
true
);
//or
$(
"input[type='checkbox']"
).prop(
"disabled"
,
"disabled"
);
//10、设置checkbox为启用状态(jquery<1.6用attr,jquery>=1.6建议用prop)
$(
"input[type='checkbox']"
).removeAttr(
"disabled"
);
//or
$(
"input[type='checkbox']"
).attr(
"disabled"
,
false
);
//or
$(
"input[type='checkbox']"
).prop(
"disabled"
,
""
);
//or
$(
"input[type='checkbox']"
).prop(
"disabled"
,
false
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > <html xmlns= "http://www.w3.org/1999/xhtml" > <head> <title></title> </head> <body> <h3>jQuery操作checkbox </h3> <input type= "checkbox" id= "cbCheckbox1" value= "1" /> <input type= "checkbox" value= "2" /> <input type= "checkbox" disabled= "disabled" value= "3" /> <input type= "checkbox" value= "4" /> <input type= "checkbox" disabled= "true" value= "5" /> <br /> <input type= "button" id= "btnDisabled" value= "禁用" onclick= "fn_disabled();" /> <input type= "button" id= "Button1" value= "启用" onclick= "fn_enable();" /><br /> <input type= "button" id= "Button2" value= "获取选中的值" onclick= "getCheckedValues();" /><br /> <input type= "button" id= "Button3" value= "选中第二个" onclick= "checkedSecond();" /> <input type= "button" id= "Button4" value= "取消选中第二个" onclick= "uncheckedSecond();" /><br /> </body> </html> <script src= "js/jquery-1.9.1.min.js" type= "text/javascript" ></script> <script type= "text/javascript" > function fn_disabled() { //$("input[type='checkbox']").attr("disabled", "disabled"); //$("input[type='checkbox']").attr("disabled", true); $( "input[type='checkbox']" ).prop( "disabled" , true ); // $("input[type='checkbox']").prop("disabled", "disabled"); } function fn_enable() { // $("input[type='checkbox']").removeAttr("disabled"); // $("input[type='checkbox']").attr("disabled", false); // $("input[type='checkbox']").prop("disabled",""); $( "input[type='checkbox']" ).prop( "disabled" , false ); } //获取选中的 checkbox的值 function getCheckedValues() { var arr = []; $( "input[type='checkbox']:checked" ).each( function (index, item) { // arr.push($( this ).val()); }); alert(arr); } function checkedSecond() { // $("input[type='checkbox']:eq(1)").prop("checked", "checked"); $( "input[type='checkbox']:eq(1)" ).prop( "checked" , true ); } function uncheckedSecond() { // $("input[type='checkbox']:eq(1)").prop("checked", ""); $( "input[type='checkbox']:eq(1)" ).prop( "checked" , false ); } $( "#cbCheckbox1" ).click( function () { if ($( this ).prop( "checked" )) { //jquery 1.6以前版本 用 $(this).attr("checked") alert( "选中" ); } else { alert( "没有选中" ); } }); </script> |
相关文章
- JQuery操作表单控件
- jQuery源码-class操作
- Visual Studio 2017中使用正则修改部分内容 如何使用ILAsm与ILDasm修改.Net exe(dll)文件 C#学习-图解教程(1):格式化数字字符串 小程序开发之图片转Base64(C#、.Net) jquery遍历table为每一个单元格取值及赋值 。net加密解密相关方法 .net关于坐标之间一些简单操作
- jquery 属性操作 attr( ) prop()css( )区别
- 在Javascript(js)或Jquery中直接实现超链接跳转代码示例!
- 猴子也能学会的jQuery第十一期——jQuery尺寸和位置操作
- 猴子也能学会的jQuery第九期——jQuery内容操作
- 前端基础 -JQuery之 层次选择器
- 汇总常用的jQuery操作Table tr td方法
- jQuery操作字符串
- jQuery选择器
- 《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.17 技巧:使用多个列
- jquery api 常见 事件操作
- jquery api 常见api 元素操作例子
- jQuery获取循环中的选中单选按钮radio的值
- 解决了jQuery插件未能导入到项目之中
- 【jQuery】对于复选框操作的attr与prop
- 使用jquery操作元素的css样式(获取、修改等等)
- jQuery EasyUI之DataGrid使用示例