jquery - 获取复选框列表中项目的值并保存在隐藏字段中

Question

我有一个复选框列表。

<asp:CheckBoxList ID="cblList" runat="server" RepeatDirection="Horizontal">                                                 
<asp:ListItem Value="S04">1</asp:ListItem>
<asp:ListItem Value="S08">2</asp:ListItem>
<asp:ListItem Value="S09">3</asp:ListItem>
<asp:ListItem>All</asp:ListItem>
 </asp:CheckBoxList>

和隐藏字段

    <asp:HiddenField ID="hddnValue" runat="server" />

我想将复选框列表的选定值存储在 HiddenField 中。

生成的 HTML

<td><input id="ctl00_ContentPlaceHolder1_cblList_0" type="checkbox" name="ctl00$ContentPlaceHolder1$cblList$0" /><label for="ctl00_ContentPlaceHolder1_cblList_0">1</label></td>

<td><input id="ctl00_ContentPlaceHolder1_cblList_1" type="checkbox" name="ctl00$ContentPlaceHolder1$cblList$1" /><label for="ctl00_ContentPlaceHolder1_cblList_1">2</label></td>

<td><input id="ctl00_ContentPlaceHolder1_cblList_2" type="checkbox" name="ctl00$ContentPlaceHolder1$cblList$2" /><label for="ctl00_ContentPlaceHolder1_cblList_2">3</label></td>

<td><input id="ctl00_ContentPlaceHolder1_cblList_3" type="checkbox" name="ctl00$ContentPlaceHolder1$cblList$3" /><label for="ctl00_ContentPlaceHolder1_cblList_3">4</label></td>

我试过了

    $(function() {
    $('#ctl00_ContentPlaceHolder1_btnConfirm').click(function() {
        debugger;
        var val = [];
        $(':checkbox:checked').each(function(i) {
            val[i] = $(this).val();
        });
    });
});

没有任何运气。请帮忙。

谢谢，

拉胡尔

Answer 1

首先class在隐藏字段上添加一个以便更容易识别：

<asp:HiddenField ID="hddnValue" CssClass="selectedItems" runat="server" />

然后在您的 jQuery 中使用map()创建一个选择数组并将值设置为逗号分隔的列表：

$('#ctl00_ContentPlaceHolder1_btnConfirm').click(function() {
    var values = $(':checkbox:checked').map(function() {
        return this.value;
    }).join(',');
    $('.selectedItems').val(values);
});

Answer 2

或者你可以做这样的事情

$('#ctl00_ContentPlaceHolder1_btnConfirm').click(function () {
    var val = [];
    $('#cblList').find('input[type=checkbox]:checked').each(function () {
        val.push($(this).val());
    })
    $('#hddnValue').val(val.join(','));
});