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

Question

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

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

取消单击按钮时，表单从 View 中消失(不显示)

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

该程序运行良好............但我有以下问题:

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