Jquery 基于复选框隐藏/显示div-淡入淡出

我对jQuery非常陌生。以前从未真正使用过它。我的复选框中有一小部分HTML：

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

目录


年度活动

业务发展、营销和管理

环境、健康与安全

人力资源

信息技术

运输

我有我的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>

$（文档）.ready（函数（）{
$（“.topnav”）.手风琴({
手风琴：“真的”，
速度:500,，
关闭标志：“”，
openedSign:“”
});
$（“事件”）。单击（函数（）{
警报（“HI”）；
var pClass='.+$（this.val（）；
如果（$（this）.is（':checked'））{
$（pClass.fadeIn（）；
$（pClass.show（）；
}否则{
$（pClass.fadeOut（）；
$（pClass.hide（）；
}
})
});

有一个与复选框类别对应的事件列表：

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

01

一月
02

一月
12

一月
20

一月

我担心我的点击功能放在了一个错误的地方，没有被复选框触发。有什么建议吗？

更改：

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

致：

注：“事件”前的点用于正确表示id

更新
这样做更合适：

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

请参阅：

更改：

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

致：

注：“事件”前的点用于正确表示id

更新
这样做更合适：

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

见：

或者，您可以将类添加到每个输入字段，并直接指定单击函数

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

    // Your code

})

或者，您可以将类添加到每个输入字段，并直接指定单击函数

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

    // Your code

})

恐怕$（“events”）应该是$（“events”）。我恐怕$（“events”）应该是$（“events”）。它是一个id。它必须是#events。它必须是#events