JavaScript 函数弄乱了我的单选按钮显示

Question

我创建了一个包含两个单选按钮的表单。

每个单选按钮在单击时会显示一个单独的表单。

当一个按钮未被点击时，表单从视图中消失（它不显示）

我还添加了第二个 JavaScript 函数，如果没有单击任何单选按钮，它会禁用“SUBMIT”按钮。

程序运行良好............除了我有以下问题：

(a) 出于某种原因，我可以同时单击两个单选按钮！单选按钮不应允许多个选择。但是，在我的表单中，两个单选按钮都是可点击的

(b) 第二个JS函数不起作用；禁用提交按钮很容易。但是............当我单击任一单选按钮时，提交按钮无法启用。

这是第一个 JS 函数（用于“隐藏”每个单选按钮下的表单）

      <script        
     src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'>
     </script>

        <script type='text/javascript'>
        function displayForm(c) {
            if (c.value == "2") {    
                jQuery('#firstformContainer').toggle('show');
                jQuery('#secondformContainer').hide();
            }
                if (c.value == "1") {
                 jQuery('#secondformContainer').toggle('show');
                 jQuery('#firstformContainer').hide();
            }
        };
        </script> 

第二个功能，用于禁用提交按钮：

 <script type="text/javascript">
        function fCheck() { 
         document.my_form.submit.disabled 
         =!(document.my_form.formselector1.checked ||       
 document.my_form.formselector2.checked); 
         } 
 </script> 

这是表格：

    <form name="my_form" id="my_form">
            <input value="1" type="radio" name="formselector" 
    id="formselector1" onClick="displayForm(this); fCheck()"></input>Input 
     Firstname
            <div style="display:none" id="firstformContainer">
                <form id="firstform"> 
                            <input type="text" "16" id="firstname" 
      name="firstname" value="$firstname">
                        </form>
            </div>
            <br>
            <br>
            <input value="2" type="radio" name="formselector" 
       id="formselector2" onClick="displayForm(this); fCheck()">
       </input>Input Surname
            <div style="display:none" id="secondformContainer">
                <form id="secondform">
                    <input type="text" id="surname" name="surname" 
        value="$surname">
                </dd>
                </form>
            </div>
          <br>
          <input type="submit" name="submit" value="REGISTER" disabled>
       </form>

我错过了什么？

更新

我已经解决了RADIO BUTTON问题。

现在，我需要解决第二个问题，使用 JS 函数：fCheck ()

它不工作。

我感觉这是因为：我没有在 ONCLICK 中正确调用这两个函数。

   <input value="1" type="radio" name="formselector" id="radio1"   
   onClick="displayForm(this); javascript:fCheck()"></input>

   <input value="2" type="radio" name="formselector" id="radio2" 
   onClick="displayForm(this); javascript:fCheck()"></input>

Answer 1

您不能嵌套表单。这使得第二个单选按钮不在表单内，因此它允许您同时选择两者。像这样重写你的html

<form name="my_form" id="my_form">
    <input value="1" type="radio" name="formselector" id="formselector1" onClick="displayForm(this); fCheck()"></input>
    <input value="2" type="radio" name="formselector" id="formselector2" onClick="displayForm(this); fCheck()"></input>
    <input type="submit" name="submit" value="REGISTER" disabled>
</form>
Input Firstname
<div style="display:none" id="firstformContainer">
    <form id="firstform"> 
        <input type="text" "16" id="firstname" name="firstname" value="$firstname">
    </form>
</div>
<br>
<br>
Input Surname            
<div style="display:none" id="secondformContainer">
    <form id="secondform">
        <input type="text" id="surname" name="surname" value="$surname">
    </form>
</div>
<br>