My php page uses sequence of three radio buttons and two out of three calls jquery click event and toggles a div accordingly...
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 radio buttons are
<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 s开发者_如何学运维tyle="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"> </td>
<td class="table_label" width='100px'>College Bank Name</td>
<td style="width:10px"> </td>
<td>
<input type='text' name='txtCollegeBankName' id='txtCollegeBankName'
Class='text_box_height_14_width_150' >
</td>
<td></td>
<td style="width:5px"> </td>
</tr>
<tr>
<td style="width:5px"> </td>
<td class="table_label" width='100px'>DD NO</td>
<td style="width:10px"> </td>
<td>
<input type='text' name='txtDDNO' id='txtDDNO'
Class='text_box_height_14_width_150' >
</td>
<td></td>
<td style="width:5px"> </td>
</tr>
<tr>
<td style="width:5px"> </td>
<td class="table_label" width='100px'>DD Amount</td>
<td style="width:10px"> </td>
<td>
<input type='text' name='txtDDAMT' id='txtDDAMT'
Class='text_box_height_14_width_150' >
</td>
<td></td>
<td style="width:5px"> </td>
</tr>
<tr>
<td style="width:5px"> </td>
<td class="table_label" width='100px'>DD Bank Name</td>
<td style="width:10px"> </td>
<td>
<input type='text' name='txtBankName' id='txtBankName'
Class='text_box_height_14_width_150' >
</td>
<td></td>
<td style="width:5px"> </td>
</tr>
<tr>
<td style="width:5px"> </td>
<td class="table_label" width='100px'>Remarks</td>
<td style="width:10px"> </td>
<td>
<input type='text' name='txtRemarks' id='txtRemarks'
Class='text_box_height_14_width_150' >
</td>
<td></td>
<td style="width:5px"> </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"> </td>
<td class="table_label" width='100px'>College Bank Name</td>
<td style="width:10px"> </td>
<td>
<input type='text' name='txtCollegeBankName' id='txtCollegeBankName'
Class='text_box_height_14_width_150' >
</td>
<td></td>
<td style="width:5px"> </td>
</tr>
<tr>
<td style="width:5px"> </td>
<td class="table_label" width='100px'>CHQ NO</td>
<td style="width:10px"> </td>
<td>
<input type='text' name='txtDDNO' id='txtDDNO'
Class='text_box_height_14_width_150' >
</td>
<td></td>
<td style="width:5px"> </td>
</tr>
<tr>
<td style="width:5px"> </td>
<td class="table_label" width='100px'>CHQ Amount</td>
<td style="width:10px"> </td>
<td>
<input type='text' name='txtDDAMT' id='txtDDAMT'
Class='text_box_height_14_width_150' >
</td>
<td></td>
<td style="width:5px"> </td>
</tr>
<tr>
<td style="width:5px"> </td>
<td class="table_label" width='100px'>CHQ Bank Name</td>
<td style="width:10px"> </td>
<td>
<input type='text' name='txtBankName' id='txtBankName'
Class='text_box_height_14_width_150' >
</td>
<td></td>
<td style="width:5px"> </td>
</tr>
<tr>
<td style="width:5px"> </td>
<td class="table_label" width='100px'>Remarks</td>
<td style="width:10px"> </td>
<td>
<input type='text' name='txtRemarks' id='txtRemarks'
Class='text_box_height_14_width_150' >
</td>
<td></td>
<td style="width:5px"> </td>
</tr>
</table>
</div>
By default i can select one but i cant select another one ... My previous radio button remains selected and my new radio button click toggles the div but its not selected....
Your radio buttons are not selected because you have event.preventDefault();
on your click functions - this cancels the click and doesn't select them.
Simply remove these lines.
Right from the very beginning of your markup, you don't close your <input>
tag.
In fact, you never close any of your input tags.
精彩评论