Question

如何根据input的name和value判断选中复选框

Answer 1

根据多选框name来获得选中的值可用如下 jquery代码实现

1
2
3

$("input:checkbox[name='test']:checked").each(function() { // 遍历name=test的多选框
$(this).val(); // 每一个被选中项的值
});

实例演示：给出两组多选框，点击按钮后分别获得两组中被选择的项目
示例代码如下
创建Html元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<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>

设置css样式

1
2
3
4
5

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;}

编写jquery代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

$(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);

});
})