Javascript not working inside asp.net checkbox list

Question

show/hide javascript not working when we click on checkbox in asp.net. I have using the following code.

Code snippets:

 <div class="prod-filter-nav">
 <h4>Category</h4>
 <asp:CheckBoxList ID="CheckBoxList1"  runat="server" class="prod-list"  
 AutoPostBack="True"   RepeatLayout="UnorderedList">
 </asp:CheckBoxList>
 </div>

The following javascript used for this page:--

jQuery(document).ready(function($){
    $('.prod-filter-nav h4').on('click', function(){
        $(this).toggleClass('closed').siblings('.prod-list').slideToggle(300);
    })
});

javascript not working when we select any of the checkbox item

Answer 1

use jquery change event (https://api.jquery.com/change/)

 $('#CheckBoxList1').change(function () {
        //your code here
    });

Answer 2

The click handler works on the click of <h4> element

$('.prod-filter-nav h4').on('click'

and not on the checkbox item click. I'd suggest that you should change the associated click handler to the check-box item level.

Answer 3

try this : with ClientID and remove AutoPostBack="True"

 $(document).ready(function () {
        $('<%=CheckBoxList1.ClientID%>').change(function () {
            //place your js code here
        });
    });

Answer 4

you have to select input[type=checkbox], but as @Ganesh_Devlekar answerd first you have to remove AutoPostBack if you dont need it, and you said you want to fire event when click on checkbox not on H4 click, so I will sugest this code

jQuery(document).ready(function($){
    $('.prod-filter-nav input[type=checkbox]').on('change', function(){
        $(this).closest(".prod-filter-nav").toggleClass('closed').siblings('.prod-list').slideToggle(300);
    })
});

But first you have to be sure of javascript selector