获取选中的复选框列表项值

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[=12=]" onclick="javascript:setTimeout('__doPostBack(\'ctl00$MainContent$ddl[=12=]\',\'\')', 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" onclick="javascript:setTimeout('__doPostBack(\'ctl00$MainContent$ddl\',\'\')', 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" onclick="javascript:setTimeout('__doPostBack(\'ctl00$MainContent$ddl\',\'\')', 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" onclick="javascript:setTimeout('__doPostBack(\'ctl00$MainContent$ddl\',\'\')', 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() 事件中使用它并检查元素是否被选中（如果为真）然后使用当前单击的元素值更新 var 值并将其发送到后端代码。

Answer 2

this 是一个 javascript 对象。

为了使用 jquery 方法，您应该将其转换为 jquery 对象

将this替换为$(this)，然后运行。

Answer 3

试试这个

 $('input[type=checkbox][id^="MainContent_ddl_"]:checked').each(function (index,item) {   
     if (values.length == 0) {
        values = $(item).val();           
     }
     else {
        values += "," + $(item).val();
     }
 });
 alert(values);

Click here to see demo

获取选中的复选框列表项值

get selected checkboxlist list items value

asp.net

jquery

checkboxlist