JQuery获取遍历中的多选框，下拉框的value

101 阅读 0 评论 67 点赞

我是靠谱客的博主落寞招牌，这篇文章主要介绍JQuery获取遍历中的多选框，下拉框的value，现在分享给大家，希望可以做个参考。

form表单select下拉框

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<form action="" method="">
<select name="id">
{volist name="data" id="vo"}
<option value="{$vo.id}" class="test">{$vo.nick}</option>
{/volist}
</select>
</form>
<script type="text/javascript">
function getSelect()
{
var selected = $(".test:selected");
var id = 0;
//用户接受得到的id
$.each(selected, function(i,e){
id = parseInt($(e).val());
});
</script>

在实现购物车时遇到了一个问题：购物车每条数据都是遍历出来的（属于未来数据），当用多选框执行选择操作时，总是无法获取每个选项的特定ID值，可以在遍历后边调用getSelect()

check多选框

复制代码

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
<form action="" method="">
<table>
<thead>
<tr>
<th><input type="checkbox" id="checkAll"></th>
<th>产品ID</th>
<th>产品名称</th>
</tr>
</thead>
<tbody>
{volist name="list" id="vo"}
<tr class="">
<td><input type="checkbox" class="test" value="{$vo['id']}"></td>
<td>{$vo['id']}</td>
<td>{$vo['name']}</td>
</tr>
{/volist}
</tbody>
</table>
</form>
<script type="text/javascript">
// 得到所有选中的id值
function getSelect(){
var checked = $('.test:checked');
var ids = '';
$.each(checked, function(i,e){
ids += $(e).val()+',';
});
}
// 点击#checkAll，实现全选或反选
$("#checkAll").on('click', function (obj) {
var allCheckBox = $('input[type="checkbox"]');
if (obj.target.checked) {
for( i=0; i<allCheckBox.length; i++){
allCheckBox[i].checked = true;
}
}else{
for( i=0; i<allCheckBox.length; i++){
allCheckBox[i].checked = false;
}
}
});
</script>