jQuery 获取选定的复选框列表列表项值

get selected checkboxlist list items value

提问by user2998990

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

        });

The above code I am trying to get the currently selected checkboxlist items value which I have defined as follows

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

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

Rendered checkboxlist

呈现的复选框列表

<tr>
        <td><input id="MainContent_ddl_0" type="checkbox" name="ctl00$MainContent$ddl
values = $(this).val()
" onclick="javascript:setTimeout(&#39;__doPostBack(\&#39;ctl00$MainContent$ddl
values = this.value;
\&#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" onclick="javascript:setTimeout(&#39;__doPostBack(\&#39;ctl00$MainContent$ddl\&#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" onclick="javascript:setTimeout(&#39;__doPostBack(\&#39;ctl00$MainContent$ddl\&#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" onclick="javascript:setTimeout(&#39;__doPostBack(\&#39;ctl00$MainContent$ddl\&#39;,\&#39;\&#39;)&#39;, 0)" value="3" /><label for="MainContent_ddl_3">JKL</label></td>
    </tr>

How can I get the currently selected value and store it in a hidden field. Where Am I going wrong.

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

回答by Jai

As per your statement:
I am trying to get the currently selected checkboxlist items value

根据您的声明：
我正在尝试获取当前选定的复选框列表项值

Try this

尝试这个

    var value;

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

or:

或者：

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

You can do something like this:

你可以这样做：

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

##代码##

Because in your script you intialized your var with a ""blank string value to all the checked input type checkboxes, so value gets concatenated with the previous values.

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

Instead you have to use this in .change()event and check if element is checked if true then update the var value with the current clicked element value and send it to the backend code.

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

回答by Cerlin

thisis a javascript object.

this是一个 javascript 对象。

in order to use jquery methods you should convert it to jquery object

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

replace thiswith $(this)and then run it.

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

回答by Manoj

Try this

尝试这个

##代码##

Click here to see demo

单击此处查看演示