jquery - 获取选中的checkboxlist列表项值

Question

$(document).ready(function () {
            var values = '';

            $('#MainContent_ddl input[type=checkbox]:checked').each(function () {
                debugger;
                alert('hi');
                if (values.length == 0) {
                    values = this.parent().attr('Value');
                }
                else {
                    values += "," + $('label[for=' + this.id + ']').html();
                }
            });
            alert(values);
            return false;

        });

上面的代码我试图获取当前选定的复选框列表项值，我定义如下

<asp:CheckBoxList ID="ddl" runat="server" AutoPostBack="true"
            OnSelectedIndexChanged="ddl_SelectedIndexChanged"
            Style="padding-top: 150px;">

            <asp:ListItem Text="ABC" Value="0"></asp:ListItem>
            <asp:ListItem Text="DEF" Value="1"></asp:ListItem>
            <asp:ListItem Text="GHI" Value="2"></asp:ListItem>
            <asp:ListItem Text="JKL" Value="3"></asp:ListItem>

        </asp:CheckBoxList>

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

渲染的复选框列表

<tr>
        <td><input id="MainContent_ddl_0" type="checkbox" name="ctl00$MainContent$ddl$0" onclick="javascript:setTimeout(&#39;__doPostBack(\&#39;ctl00$MainContent$ddl$0\&#39;,\&#39;\&#39;)&#39;, 0)" value="0" /><label for="MainContent_ddl_0">ABC</label></td>
    </tr><tr>
        <td><input id="MainContent_ddl_1" type="checkbox" name="ctl00$MainContent$ddl$1" onclick="javascript:setTimeout(&#39;__doPostBack(\&#39;ctl00$MainContent$ddl$1\&#39;,\&#39;\&#39;)&#39;, 0)" value="1" /><label for="MainContent_ddl_1">DEF</label></td>
    </tr><tr>
        <td><input id="MainContent_ddl_2" type="checkbox" name="ctl00$MainContent$ddl$2" onclick="javascript:setTimeout(&#39;__doPostBack(\&#39;ctl00$MainContent$ddl$2\&#39;,\&#39;\&#39;)&#39;, 0)" value="2" /><label for="MainContent_ddl_2">GHI</label></td>
    </tr><tr>
        <td><input id="MainContent_ddl_3" type="checkbox" name="ctl00$MainContent$ddl$3" onclick="javascript:setTimeout(&#39;__doPostBack(\&#39;ctl00$MainContent$ddl$3\&#39;,\&#39;\&#39;)&#39;, 0)" value="3" /><label for="MainContent_ddl_3">JKL</label></td>
    </tr>

如何获取当前选定的值并将其存储在隐藏字段中。我哪里出错了。

Answer 1

根据您的陈述:
我正在尝试获取当前选定的复选框列表项值

试试这个

values = $(this).val()

或者:

values = this.value;

你可以这样做:

    var value;

    $('input[type=checkbox]').change(function () {
        if(this.checked){
           value = this.value; // put the value of checked only
        }
        $('p').text(value);
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='checkbox' value='0' />
<input type='checkbox' value='1' />
<input type='checkbox' value='2' />
<input type='checkbox' value='3' />
<input type='checkbox' value='4' />
<p></p>

因为在脚本中，您使用 "" 空白字符串值对所有选中的输入类型复选框初始化了 var，因此值会与之前的值连接起来。

相反，您必须在 .change() 事件中使用它，并检查元素是否被检查(如果为 true)，然后使用当前单击的元素值更新 var 值并将其发送到后端代码。