JavaScript 功能扰乱了我的单选按钮显示

Question

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

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

取消单击按钮时，表单从视图中消失（未显示）

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

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

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

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

这是第一个JS函数（"hiding"每个单选按钮下的表单）

      <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

您不能嵌套表格。这使得第二个单选按钮不在表单内，因此它允许您同时 select 两者。像这样重写你的 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>

JavaScript 功能扰乱了我的单选按钮显示

JavaScript functions messing up my Radio Button displays

html

javascript

php

jquery

radio-button