Jquery Onclick似乎不适合我

Question

我的php页面使用了三个单选按钮的序列和三个中的两个调用jquery click事件并相应地切换div ...

这是我的Jquery函数....

$(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();
  });
});

我的单选按钮是

        <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>

默认情况下，我可以选择一个，但我不能选择另一个...我的上一个单选按钮保持选中状态，我的新单选按钮单击切换div，但未选中...

Answer 1

您的单选按钮未被选中，因为您的点击功能有event.preventDefault(); - 这会取消点击而不会选择它们。
只需删除这些行。

Answer 2

从标记的最开始，您就不会关闭<input>标记。

事实上，您永远不会关闭任何输入标签。