博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jquery获取复选框的值
阅读量:6276 次
发布时间:2019-06-22

本文共 3313 字,大约阅读时间需要 11 分钟。

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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
  
<mce:script src=
"jquery.js" 
mce_src=
"jquery.js"
></mce:script><!--这是载入jquery.js文件,如果不使用jquery可以去掉-->    
<mce:script type=
"text/javascript"
><!--  
     
function 
chk(){    
  
var 
obj=document.getElementsByName(
'test'
);  
//选择所有name="'test'"的对象,返回数组    
  
//取到对象数组后,我们来循环检测它是不是被选中    
  
var 
s=
''
;    
  
for
(
var 
i=0; i<obj.length; i++){    
    
if
(obj[i].checked) s+=obj[i].value+
','
;  
//如果选中,将value添加到变量s中    
  
}    
  
//那么现在来检测s的值就知道选中的复选框的值了    
  
alert(s==
''
?
'你还没有选择任何内容!'
:s);    
}    
     
function 
jqchk(){  
//jquery获取复选框值    
  
var 
chk_value =[];    
  
$(
'input[name="test"]:checked'
).each(
function
(){    
   
chk_value.push($(
this
).val());    
  
});    
  
alert(chk_value.length==0 ?
'你还没有选择任何内容!'
:chk_value);    
}    
// --></mce:script>  
  
对checkbox的其他几个操作
1. 全选
2. 取消全选
3. 选中所有奇数
4. 反选
5. 获得选中的所有值
js代码
 
  
<!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>  
<meta http-equiv=
"Content-Type" 
content=
"text/html; charset=utf-8" 
/>  
<title>louis-blog >> jQuery 对checkbox的操作</title>  
<mce:script type=
'text/javascript' 
src=
"http://leotheme.cn/wp-includes/js/jquery/jquery.js" 
mce_src=
"http://leotheme.cn/wp-includes/js/jquery/jquery.js"
></mce:script>  
<SCRIPT LANGUAGE=
"JavaScript"
>  
<!--  
$(
"document"
).ready(
function
(){  
$(
"#btn1"
).click(
function
(){  
$(
"[name='checkbox']"
).attr(
"checked"
,
'true'
);
//全选  
})  
$(
"#btn2"
).click(
function
(){  
$(
"[name='checkbox']"
).removeAttr(
"checked"
);
//取消全选  
})  
$(
"#btn3"
).click(
function
(){  
$(
"[name='checkbox']:even"
).attr(
"checked"
,
'true'
);
//选中所有奇数  
})  
$(
"#btn4"
).click(
function
(){  
$(
"[name='checkbox']"
).each(
function
(){
//反选  
if
($(
this
).attr(
"checked"
)){  
$(
this
).removeAttr(
"checked"
);  
}  
else
{  
$(
this
).attr(
"checked"
,
'true'
);  
}  
})  
})  
$(
"#btn5"
).click(
function
(){
//输出选中的值  
var 
str=
""
;  
$(
"[name='checkbox'][checked]"
).each(
function
(){  
str+=$(
this
).val()+
"/r/n"
;  
//alert($(this).val());  
})  
alert(str);  
})  
})  
-->  
</SCRIPT>  
</HEAD>  
<body style=
"text-align:center;margin: 0 auto;font-size: 12px;" 
mce_style=
"text-align:center;margin: 0 auto;font-size: 12px;"
>  
<div style=
"border: 1px solid #999; width: 500px; padding: 15px; background: #eee; margin-top: 150px;"
>  
<form name=
"form1" 
method=
"post" 
action=
""
>  
<input type=
"button" 
id=
"btn1" 
value=
"全选"
>  
<input type=
"button" 
id=
"btn2" 
value=
"取消全选"
>  
<input type=
"button" 
id=
"btn3" 
value=
"选中所有奇数"
>  
<input type=
"button" 
id=
"btn4" 
value=
"反选"
>  
<input type=
"button" 
id=
"btn5" 
value=
"获得选中的所有值"
>  
<br /><br />  
<input type=
"checkbox" 
name=
"checkbox" 
value=
"checkbox1"
>  
checkbox1  
<input type=
"checkbox" 
name=
"checkbox" 
value=
"checkbox2"
>  
checkbox2  
<input type=
"checkbox" 
name=
"checkbox" 
value=
"checkbox3"
>  
checkbox3  
<input type=
"checkbox" 
name=
"checkbox" 
value=
"checkbox4"
>  
checkbox4  
<input type=
"checkbox" 
name=
"checkbox" 
value=
"checkbox5"
>  
checkbox5  
<input type=
"checkbox" 
name=
"checkbox" 
value=
"checkbox6"
>  
checkbox6  
</form>  
</div>  
</body>  
</HTML>
本文转自 IT阿飞 51CTO博客,原文链接:http://blog.51cto.com/itafei/1941884

转载地址:http://nkwva.baihongyu.com/

你可能感兴趣的文章
.net中ashx文件有什么用?功能有那些,一般用在什么情况下?
查看>>
select、poll、epoll之间的区别总结[整理]【转】
查看>>
CSS基础知识(上)
查看>>
PHP中常见的面试题2(附答案)
查看>>
26.Azure备份服务器(下)
查看>>
mybatis学习
查看>>
LCD的接口类型详解
查看>>
C#中使用RabbitMQ收发队列消息
查看>>
Spring Boot Unregistering JMX-exposed beans on shutdown
查看>>
poi 导入导出的api说明(大全)
查看>>
说说自己对RESTful API的理解s
查看>>
Mono for Android 优势与劣势
查看>>
将图片转成base64字符串并在JSP页面显示的Java代码
查看>>
js 面试题
查看>>
sqoop数据迁移(基于Hadoop和关系数据库服务器之间传送数据)
查看>>
腾讯云下安装 nodejs + 实现 Nginx 反向代理
查看>>
magento2-- 理解自动加载
查看>>
International SEO:多语言多区域网站SEO的快速入门指南
查看>>
180918-JDK之Deflater压缩与Inflater解压
查看>>
redis系列:通过队列案例学习list命令
查看>>