how to hide and show div from javascript using jquery

try this,

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

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';
    }
}

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>

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 (e.g. 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.