Hiding/Showing divs based on checkbox - fading

Question

I am very new to jQuery. Never have actually used it before. I have this snippit of HTML for my checkboxes:

<h4>Caterories</h4>
         <ul>
          <fieldset id="events">
              <li>    
                <input name="" type="checkbox" value="annual" checked="checked" />   
                Annual Events</li>    
              <li>   
                <input name="" type="checkbox" value="business" checked="checked"/>    
                Business Development, Marketing & Management</li>    
                <li>    
                <input name="" type="checkbox" value="enviro" checked="checked"/>
                Environment, Health & Safety</li>                  
              <li>    
                <input name="" type="checkbox" value="hr" checked="checked"/>
                Human Resources</li>
              <li>    
                <input name="" type="checkbox" value="it" checked="checked"/>    
                Information Technology</li>                     
              <li>    
                <input name="" type="checkbox" value="trans" checked="checked"/>
                Transportation</li>
           </fieldset>
          </ul>

I have my snippit of jquery:

<script language="JavaScript">

$(document).ready(function() {

    $(".topnav").accordion({
        accordion:'true',
        speed: 500,
        closedSign: '',
        openedSign: ''
    });

    $("events").click(function(){
        alert("HI");
       var pClass = '.'+$(this).val();
       if ($(this).is(':checked')) {
             $(pClass).fadeIn();
             $(pClass).show();
          } else {
              $(pClass).fadeOut();
              $(pClass).hide();
          }
    })

});


</script>

There is a listing of events that correspond to the checkbox categories:

<div class="news_box hr">
   <div class="date">01<br /> 
   Jan.<br /><br>
</div>

<div class="news_box annual">
   <div class="date">02<br /> 
   Jan.<br /><br>
</div>

<div class="news_box it">
   <div class="date">12<br /> 
   Jan.<br /><br>
</div>
<div class="news_box hr">
   <div class="date">20<br /> 
   Jan.<br /><br>
</div>

I'm afraid that I have my click function in a wrong place where it's not being triggered by the checkbox check. Any suggestions?

I'm afraid $("events") should be $("#events"). – jathin Aug 08 '12 at 14:02 — jathin, Aug 08 '12 at 14:02

score 1 · Accepted Answer · edited May 23 '17 at 11:56

1

Change:

$("events").click(function(){

to:

$("#events input:checkbox").click(function(){

note: the dot before "events" to correctly denote the id.

update
This is more properly done like this:

$("#events input:checkbox").on('click', function(){ ...

See: Difference between .on('click') vs .click()

edited May 23 '17 at 11:56

Community

1
1

answered Aug 08 '12 at 14:00

Faust

15,130
9
54
111

Its an id. It has to be #events – Karan Punamiya Aug 08 '12 at 14:02

score 0 · Answer 2 · answered Aug 08 '12 at 14:02

0

$("#events > li > input").click(function(){

    // Your code

})

Or you can add class to every input field and assign click function directly.

$(".inputclass").click(function(){

    // Your code

})

answered Aug 08 '12 at 14:02

Edward Ruchevits

6,411
12
51
86

Hiding/Showing divs based on checkbox - fading

2 Answers2