jquery怎樣獲取多個復選框的值?
阿新 • • 發佈:2018-06-02
target ssa cti contain 樣式 val value css樣式 UNC
jquery的遍歷方法可以獲取復選框所欲的選中值
1 2 |
$( "input:checkbox:checked" ).each( function (index,element)); // 為所有選中的復選框執行函數,函數體中可以取出每個復選框的值
$( "input:checkbox:checked" ).map( function (index,domElement)); // 將所有選中的復選框通過函數返回值生成新的jQuery 對象
|
實例演示:點擊按鈕獲取checkbox的選中值
-
創建Html元素
1 2 3 4 5 6 7 8 <
div
class
=
"box"
>
<
span
>點擊按鈕獲取checkbox的選中值:</
span
>
<
div
class
=
"content"
>
<
input
type
=
‘checkbox‘
name
=
‘message‘
value
=
‘1‘
/>發送短信
<
input
type
=
‘checkbox‘
name
=
‘message‘
value
=
‘2‘
/>發送郵件
</
div
>
<
input
type
=
"button"
value
=
"提交"
>
</
div
>
-
設置css樣式
1 2 3 div.box{
width
:
300px
;
padding
:
20px
;
margin
:
20px
;
border
:
4px
dashed
#ccc
;}
div.box>span{
color
:
#999
;
font-style
:
italic
;}
div.content{
width
:
250px
;
margin
:
10px
0
;
padding
:
20px
;
border
:
2px
solid
#ff6666
;}
-
編寫jquery代碼
1 2 3 4 5 6 7 8 $(
function
(){
$(
"input:button"
).click(
function
() {
text = $(
"input:checkbox[name=‘message‘]:checked"
).map(
function
(index,elem) {
return
$(elem).val();
}).get().join(
‘,‘
);
alert(
"選中的checkbox的值為:"
+text);
});
});
-
觀察效果
jquery怎樣獲取多個復選框的值?