【问题标题】:get selected checkboxlist list items value获取选中的 checkboxlist 列表项值
【发布时间】:2015-01-05 10:43:23
【问题描述】:
$(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>

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

【问题讨论】:

  • 拜托拜托请添加呈现的html而不是服务器端编码
  • @CerlinBoss :请查看编辑。

标签: jquery asp.net checkboxlist


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

【讨论】:

  • 现在的问题是,如果我选中第二个复选框,它会给我第一个 chk 框的值,然后是第二个复选框。我想要当前选中的复选框列表值。我该怎么做。
  • 您到底想做什么?您能否详细说明,因为可能有更好的方法可以做。
  • 我有一个带有一些值的复选框列表。当我选择一个复选框列表项时,我使用它的 id 从 DB 获取数据。现在,当我选择第二个复选框列表项时,我只想要第二个复选框列表项的值,这样我就可以获取该值并转到数据库并获取数据并将其附加到带有先前复选框列表项数据的网格视图中。
  • 因为在您的脚本中,您使用 "" 空白字符串值初始化了您的 var,所有选中的值都与之前的值连接。相反,您必须在 .change() 事件中使用它并检查元素是否被检查是否为真,然后使用当前单击的元素值更新 var 值并将其发送到后端代码。
  • 你能把代码提供给我吗?我对使用 jquery 和其他东西很陌生。我会很感激的。
【解决方案2】:

this 是一个 javascript 对象。

要使用 jquery 方法,您应该将其转换为 jquery 对象

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

【讨论】:

  • 这是一个 javascript 对象。 不,它是一个 dom 节点,而 $(this) 是一个 jQuery 包装器,$() 它是一个用于包装 dom 节点的 jQuery 包装器创建一个 jQuery 选择器。
【解决方案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

【讨论】:

  • 您应该使用 controlName.ClientID 而不是 id 上的通配符匹配。
猜你喜欢
  • 2023-04-04
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-05-26
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-02-10
相关资源
最近更新 更多