如何使用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>

When check box will be checked then I want to hide div showHideDiv and show div showHideDiv2 and if unchecked then I want to show div showHideDiv and hide div showHideDiv2. But its not working

Answer 1

try this,

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

Answer 2

Try this using length of :checked :

if jquery lib is used then this way:

if ($(':checked').length > 0){

  ........all other stuff....

or with javascript:

function toggleDiv(){
    if (document.getElementById("searchByRegn_ChkBox").checked){
         document.getElementById("showHideDiv2").style.display='block';
         document.getElementById("showHideDiv").style.display = 'none';
    }else{
         document.getElementById("showHideDiv2").style.display='none';
         document.getElementById("showHideDiv").style.display = 'block';
    }
}

Answer 3

I can't see anything intrinsically broken in your code, unless you've failed to include jQuery, in which case there should be errors in your browser's console whenever you click.

That said, you should avoid DOM0 inline event handlers. They require that the registered handler be a global variable (bad) and don't support lots of nice things (eg bubbling vs capture) that proper DOM3 event handlers can do.

As you're using jQuery, you can use that to register the event handler too, which will then make testing the checkbox easier. You also need to ensure that you wrap your code in a document.ready handler, which should give you this as the entire required code:

$(function() {   // shorthand for document.ready
    $('#searchByRegn_ChkBox').on('click', function() {
        var state = this.checked;
        $('#showHideDiv2').toggle(state);
        $('#showHideDiv').toggle(!state);
    });
});

Note use of the Boolean version of .toggle which does a .show or a .hide depending on the supplied parameter.

See http://jsfiddle.net/alnitak/5L4PF/ NB - I changed the HTML too because you had an illegal mix of <tr> and <div> elements.

Answer 4

You may need to remove the divs from a table layout to achieve the desired result. You can use the change() selector to fire whenever the checkbox is changed.

jsFiddle - http://jsfiddle.net/Zye8f/1/

jquery part:

$(document).ready(function() {
    $('#searchByRegn_ChkBox').change(function() {
        $('#showHideDiv').toggle();
        $('#showHideDiv2').toggle();
    });
});

and the updated html

<input type="checkbox"  id="searchByRegn_ChkBox" checked onclick="toggleDiv(); "/>Custom Search
<div id="showHideDiv2">&nbsp;</div>
<div id="showHideDiv">Regn. No :
    <input type="text" id="rNo" name="regPreSerailNumber" size="15" maxlength="50" onkeypress="return numbersonly(this, event)" />
</div>