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

时间:2015-01-05 10:43:24

标签: jquery asp.net checkboxlist

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

        });

以上代码我试图获取当前选中的checkboxlist项值,我已定义如下

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

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

3 个答案:

答案 0 :(得分:4)

根据你的陈述:
我正在尝试获取当前选中的checkboxlist项值

试试这个

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值并将其发送到后端代码。

答案 1 :(得分:1)

this是一个javascript对象。

为了使用jquery方法,你应该将它转换为jquery对象

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

答案 2 :(得分:1)

试试这个

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