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

HEEN · Accepted Answer · 2015-12-09 07:03:25Z

4

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

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

edited Dec 9, 2015 at 7:03

HEEN

4,75414 gold badges85 silver badges173 bronze badges

answered Dec 9, 2015 at 5:58

Muhammad Atif

1,1221 gold badge10 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

shishir · Accepted Answer · 2015-12-09 06:41:45Z

3

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.

answered Dec 9, 2015 at 6:41

shishir

8373 gold badges11 silver badges27 bronze badges

Comments

Suhail Keyjani · Accepted Answer · 2015-12-09 07:01:37Z

0

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

edited Dec 9, 2015 at 7:01

answered Dec 9, 2015 at 6:44

Suhail Keyjani

5883 silver badges11 bronze badges

1 Comment

Sudeep Over a year ago

i cant hide that div after select any of the checkbox item, if i don't select checkbox i can hide that div when i click on h4

HEEN · Accepted Answer · 2015-12-09 07:14:36Z

0

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

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

edited Dec 9, 2015 at 7:14

HEEN

4,75414 gold badges85 silver badges173 bronze badges

answered Dec 9, 2015 at 6:26

Dgan

10.3k1 gold badge33 silver badges51 bronze badges

Collectives™ on Stack Overflow

Javascript not working inside asp.net checkbox list

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related