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

Question

I wants to alert checkbox value if selected.And it will not have any id or class . It's a listbox item which is having checkbox. User may select multiple checkbox.

Here is my ASPX code

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

I am using SQLDataSource to bring the list from database. So It will not have any id or class.

screanshot

Update

Answer 1

In jquery you can bind events to either element types or a collection of element child. I would try the following

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

Answer 2

You can select a group of items just by its node type. Take a look at the next snippet, the selector selects all the inputs inside the element with the class multiselect-container . Then you can add a "change" event to that selection.

 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> 

EDIT:

As you are using a jQuery plugin to create the checkboxes , it is better to use the jQuery built-in event delegation to create the "change" event. Something like this:

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

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

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

});

Answer 3

For this Bootstrap-multiselect jquery add on , there is a specific function to get the selected values.

Here is the code:

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