Using the Multi box name to get the selected value can be implemented with the following jquery code
123 |
$( "input:checkbox[name=‘test‘]:checked" ).each( function () { // 遍历name=test的多选框 $( this ).val(); // 每一个被选中项的值 }); |
Example Demo: Give two sets of multi-box, click the button to get two groups of selected items
The sample code is as follows
Creating HTML Elements
12345678910111213141516 |
<
div
class
=
"box"
>
<
span
>请输入用户名,限定字母、数字或下划线的组合:</
span
>
<
div
class
=
"content"
>
<
span
>水果:</
span
>
<
input
type
=
"checkbox" name
=
"fruit"
value
=
"梨子"
/>梨子
<
input
type
=
"checkbox"
name
=
"fruit"
value
=
"李子"
/>李子
<
input
type
=
"checkbox"
name
=
"fruit"
value
=
"栗子"
/>栗子
<
input
type
=
"checkbox"
name
=
"fruit"
value
=
"荔枝"
/>荔枝
<
span
>蔬菜:</
span
>
<
input
type
=
"checkbox"
name
=
"vegetable"
value
=
"青菜"
/>青菜
<
input
type
=
"checkbox"
name
=
"vegetable"
value
=
"萝卜"
/>萝卜
<
input
type
=
"checkbox"
name
=
"vegetable"
value
=
"土豆"
/>土豆
<
input
type
=
"checkbox"
name
=
"vegetable" value
=
"茄子"
/>茄子
</
div
>
<
input
type
=
"button"
value
=
"提交"
>
</
div
>
|
Set CSS Styles
12345 |
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
;}
input[type=
‘checkbox‘
]{
margin
:
5px
;}
input[type=
‘button‘
]{
height
:
30px
;
margin
:
10px
;
padding
:
5px
10px
;}
|
Writing jquery Code
123456789101112131415 |
$(
function
(){
// 设置属性值
$(
"input:button"
).click(
function
() {
var
fruit =
""
;
var
vegetable =
""
;
$(
"input:checkbox[name=‘fruit‘]:checked"
).each(
function
() {
fruit += $(
this
).val() +
" "
;
});
$(
"input:checkbox[name=‘vegetable‘]:checked"
).each(
function
() {
vegetable += $(
this
).val() +
" "
;
});
alert(
"已选择水果:"
+fruit+
",已选择蔬菜:"
+vegetable);
});
})
|
Observation effect
How does jquery get the selected value based on the multiple marquee name.