javascript - 如何使用jquery从javascript隐藏和显示div

Question

        <script type="text/javascript">
            function toggleDiv()
            {
                if (document.getElementById("searchByRegn_ChkBox").checked)
                {
                        $("#showHideDiv2").show();
                          $('#showHideDiv').hide();
                }
                else
                {
                 $('#showHideDiv2').hide();
                   $('#showHideDiv').show();

                }
            }

        </script>


<tr class="TextDarkBlueBOLD">
                        <td  width="20%" align="left">
                            <input type="checkbox"  id="searchByRegn_ChkBox" checked onclick="toggleDiv(); "/>
                            Custom Search
                        </td>
                        <td valign="top">

                        </td>
</tr>
                  <div id="showHideDiv">   <tr class="TextDarkBlueBOLD">
                        <td  width="20%">
                           Regn. No :
                        </td>
                        <td  align="left">
                            <input type="text" id="rNo" name="regPreSerailNumber" size="15" maxlength="50" onkeypress="return numbersonly(this, event)">
                        </td>
                    </tr></div>
                    <div id="showHideDiv2">
                            <tr>
                              <td class=PageHeader14 colspan="2" align="center">Enrolment Search</td>
                            </tr>
                   </div>

当选中复选框时，我想隐藏 div showHideDiv 并显示 div showHideDiv2，如果未选中，则我想显示 div showHideDiv 并隐藏 div showHideDiv2。但它不起作用

Answer 1

试试这个，

 $('#searchByRegn_ChkBox').click(function(){
    if (this.checked){
      $('#showHideDiv2').show();
      $('#showHideDiv').hide();
      // other stuff..............