如何使用JQUERY获取没有id或类的复选框onchange的值?

时间:2017-07-15 17:00:34

标签: javascript c# jquery asp.net checkbox

如果选中,我想提醒复选框值。它不会有任何 ID或类。它是一个有复选框的列表框项目。用户可以选择多个复选框。

这是我的 ASPX代码

<asp:ListBox ID="ListStoreID" CssClass="multiselect" runat="server" SelectionMode="Multiple" DataSourceID="SqlDataSource3" DataTextField="ID" DataValueField="ID">

</asp:ListBox>
<asp:SqlDataSource ID="SqlDataSource3" runat="server" ConnectionString="<%$ ConnectionStrings:datareload33 %>" SelectCommand="SELECT [ID] FROM [Store] WHERE ([Inactive] = @Inactive)">
     <SelectParameters>
          <asp:Parameter DefaultValue="false" Name="Inactive" Type="Boolean" />
     </SelectParameters>
</asp:SqlDataSource>

<script type="text/javascript">
    $(function () {
        $('[id*=ContentPlaceHolder1_ListStoreID]').multiselect({
            includeSelectAllOption: false,
            buttonText: function (options, select) {
                return 'StoreID';
            },
            buttonTitle: function (options, select) {
                var labels = [];
                options.each(function () {
                    labels.push($(this).text());
                });
                return labels.join(' - ');
            }
        });
    });
    </script>
  

我正在使用 SQLDataSource 从数据库中提取列表。所以它不会有任何id或类。

screanshot

screenshot of aspx code

client side code

更新

last screenshot

3 个答案:

答案 0 :(得分:0)

在jquery中,您可以将事件绑定到元素类型或元素子集合。 我会尝试以下

$('input[type="checkbox"]').change(function() {
    if(this.checked){
            //alert whatever you need.. probably this.value
            alert(this.value); 
    }
});

答案 1 :(得分:0)

您可以仅根据其节点类型选择一组项目。看一下下一个片段,选择器选择具有类multiselect-container的元素内的所有输入。然后,您可以为该选择添加“更改”事件。

var checkboxes = $(".multiselect-container input");

checkboxes.on("change", function() {

  console.log($(this).val() + " --> " + $(this).prop("checked"));

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="multiselect-container dropdown-menu">
  <li>
    <a tabindex="0">
      <label class="checkbox">
          <input type="checkbox" value="1001" />1001
      </label>
    </a>
  </li>
  <li>
    <a tabindex="1">
      <label class="checkbox">
          <input type="checkbox" value="1201" />1201
      </label>
    </a>
  </li>
  <li>
    <a tabindex="2">
      <label class="checkbox">
          <input type="checkbox" value="2001" />2001
      </label>
    </a>
  </li>
  <li>
    <a tabindex="3">
      <label class="checkbox">
          <input type="checkbox" value="2200" />2200
      </label>
    </a>
  </li>
  <li>
    <a tabindex="4">
      <label class="checkbox">
          <input type="checkbox" value="1004" />1004
      </label>
    </a>
  </li>
</ul>

修改

当您使用jQuery插件创建checkboxes时,最好使用jQuery内置事件委派来创建“更改”事件。像这样:

var container = $(".multiselect-container");

container.on("change", "input", function() {

  console.log($(this).val() + " --> " + $(this).prop("checked"));

});

答案 2 :(得分:0)

对于 Bootstrap-multiselect jquery add on ,有一个特定的函数来获取所选的值。

以下是代码:

<asp:ListBox ID="ListStoreID" CssClass="multiselect records" runat="server" SelectionMode="Multiple" DataSourceID="SqlDataSource3" DataTextField="ID" DataValueField="ID">                    
</asp:ListBox>

<asp:SqlDataSource ID="SqlDataSource3" runat="server" ConnectionString="<%$ ConnectionStrings:recordsf1534 %>" SelectCommand="SELECT [ID] FROM [Store] WHERE ([Inactive] = @Inactive)">
    <SelectParameters>
        <asp:Parameter DefaultValue="false" Name="Inactive" Type="Boolean" />
    </SelectParameters>
</asp:SqlDataSource>

<script type="text/javascript">
    $(function () {
        $('[id*=ContentPlaceHolder1_ListStoreID]').multiselect({
            includeSelectAllOption: false,
            buttonText: function (options, select) {
                return 'StoreID';
            },
            buttonTitle: function (options, select) {
                var labels = [];
                options.each(function () {
                    labels.push($(this).text());
                });                  
                alert(labels.join(','));   // this alert will bring whenever user select the checkbox
                return labels.join(' , ');
            }
        });
    });
</script>