Jquery onclick doesn't seem to work for me

Question

My php page uses a sequence of three radio buttons and two of the three jquery click event calls and accordingly switches the div ...

Here is my jQuery function ....

$(function() { $("#click_here").click(function(event) { event.preventDefault(); $("#div1").slideToggle(); }); $("#div1 a").click(function(event) { event.preventDefault(); $("#div1").slideUp(); }); }); $(function() { $("#click").click(function(event) { event.preventDefault(); $("#div2").slideToggle(); }); $("#div2 a").click(function(event) { event.preventDefault(); $("#div2").slideUp(); }); }); 

and my switches

  <input type="radio" name="Modeofpayment" value="1">Cash <div> <div id="id" style="width:411x; height:20px;"> <input type="radio" name="Modeofpayment" id="click_here" value="2">DD </div> <div style="display: none;" id="div1"> <div style="float:right;"> <a href="#" class="close">[x]</a> </div> <input type="hidden" name="chkVal" id="chkVal" size="20"> <table border="0" width="200" align="center"> <tr> <td style="width:5px">&nbsp;</td> <td class="table_label" width='100px'>College Bank Name</td> <td style="width:10px">&nbsp;</td> <td> <input type='text' name='txtCollegeBankName' id='txtCollegeBankName' Class='text_box_height_14_width_150' > </td> <td></td> <td style="width:5px">&nbsp;</td> </tr> <tr> <td style="width:5px">&nbsp;</td> <td class="table_label" width='100px'>DD NO</td> <td style="width:10px">&nbsp;</td> <td> <input type='text' name='txtDDNO' id='txtDDNO' Class='text_box_height_14_width_150' > </td> <td></td> <td style="width:5px">&nbsp;</td> </tr> <tr> <td style="width:5px">&nbsp;</td> <td class="table_label" width='100px'>DD Amount</td> <td style="width:10px">&nbsp;</td> <td> <input type='text' name='txtDDAMT' id='txtDDAMT' Class='text_box_height_14_width_150' > </td> <td></td> <td style="width:5px">&nbsp;</td> </tr> <tr> <td style="width:5px">&nbsp;</td> <td class="table_label" width='100px'>DD Bank Name</td> <td style="width:10px">&nbsp;</td> <td> <input type='text' name='txtBankName' id='txtBankName' Class='text_box_height_14_width_150' > </td> <td></td> <td style="width:5px">&nbsp;</td> </tr> <tr> <td style="width:5px">&nbsp;</td> <td class="table_label" width='100px'>Remarks</td> <td style="width:10px">&nbsp;</td> <td> <input type='text' name='txtRemarks' id='txtRemarks' Class='text_box_height_14_width_150' > </td> <td></td> <td style="width:5px">&nbsp;</td> </tr> </table> </div> <div> <div id="id" style="width:411x; height:20px;"> <input type="radio" name="Modeofpayment" id="click" value="3">Cheque </div> <div style="display: none;" id="div2"> <div style="float:right;"> <a href="#" class="close">[x]</a> </div> <input type="hidden" name="chkVal" id="chkVal" size="20"> <table border="0" width="200" align="center"> <tr> <td style="width:5px">&nbsp;</td> <td class="table_label" width='100px'>College Bank Name</td> <td style="width:10px">&nbsp;</td> <td> <input type='text' name='txtCollegeBankName' id='txtCollegeBankName' Class='text_box_height_14_width_150' > </td> <td></td> <td style="width:5px">&nbsp;</td> </tr> <tr> <td style="width:5px">&nbsp;</td> <td class="table_label" width='100px'>CHQ NO</td> <td style="width:10px">&nbsp;</td> <td> <input type='text' name='txtDDNO' id='txtDDNO' Class='text_box_height_14_width_150' > </td> <td></td> <td style="width:5px">&nbsp;</td> </tr> <tr> <td style="width:5px">&nbsp;</td> <td class="table_label" width='100px'>CHQ Amount</td> <td style="width:10px">&nbsp;</td> <td> <input type='text' name='txtDDAMT' id='txtDDAMT' Class='text_box_height_14_width_150' > </td> <td></td> <td style="width:5px">&nbsp;</td> </tr> <tr> <td style="width:5px">&nbsp;</td> <td class="table_label" width='100px'>CHQ Bank Name</td> <td style="width:10px">&nbsp;</td> <td> <input type='text' name='txtBankName' id='txtBankName' Class='text_box_height_14_width_150' > </td> <td></td> <td style="width:5px">&nbsp;</td> </tr> <tr> <td style="width:5px">&nbsp;</td> <td class="table_label" width='100px'>Remarks</td> <td style="width:10px">&nbsp;</td> <td> <input type='text' name='txtRemarks' id='txtRemarks' Class='text_box_height_14_width_150' > </td> <td></td> <td style="width:5px">&nbsp;</td> </tr> </table> </div> 

By default, I can choose one, but I can not choose another ... My previous radio button remains selected, and my new radio button toggles the div, but it is not selected ....

Answer 1

Your radio buttons are not selected because you have event.preventDefault(); on your click functions - this cancels the click and does not select them.
Just delete these lines.

Answer 2

From the very beginning of the markup, you do not close the <input> .

In fact, you never close any of your input tags.