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
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);
}
});
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"));
});
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.