Question

<form name="quest" onsubmit="return validate();">
  <table width="100%" border="1">
    <tr>
      <td>Question</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
        <td width="98">Response Type<font color="#CC0000">*</font></td>
        <td>
        <input type="radio" value="1" name="R1" onClick="showresponse(1)"> 
        True/False
        <input type="radio" value="2" name="R1" onclick="showresponse(2)">Single 
        Best Answer
        <input type="radio" value="3" name="R1" onclick="showresponse(3)">Multiple 
        Answers</td>
    </tr>
    <tr>
      <td width="98" valign="top"><span id="lbl" >Add Response<font color="#CC0000">*</font></span></td>
      <td>
            <table border="0" width="425" cellspacing="0" id="response2" cellpadding="5">
            <tr>
                <td width="161">
                <input type="text" name="cb1" size="20" style="width:300px;" maxlength="100"></td>
                <td>
                <input type="radio" value="1" name="R3"> 
                Answer</td>
            </tr>
            <tr>
                <td width="161">
                <input type="text" name="cb2" size="20"  style="width:300px;" maxlength="100"></td>
                <td>
                <input type="radio" value="2"  name="R3"> 
                Answer</td>
            </tr>
            <tr>
                <td width="161">
                <input type="text" name="cb3" size="20" style="width:300px;" maxlength="100"></td>
                <td>
                <input type="radio" value="3" name="R3"> 
                Answer</td>
            </tr>
            <tr>
                <td width="161">
                <input type="text" name="cb4" size="20"  style="width:300px;" maxlength="100"></td>
                <td>
                <input type="radio" value="4"  name="R3"> 
                Answer</td>
            </tr>
            <tr>
                <td width="161">
                <input type="text" name="cb5" size="20"  style="width:300px;" maxlength="100"></td>
                <td>
                <input type="radio" value="5"  name="R3"> 
                Answer</td>
            </tr>
            </table> 
        </td>   
    </tr>

  </table>
</form>

我想验证一个人可以输入最小3个响应（添加响应）和最多5个响应。一旦输入响应，只允许选择答案（单选按钮）。请有人帮助我。提前谢谢

Answer 1

您可以在下面尝试此解决方案。

请注意，可以在本文末尾找到完整的工作示例。

将method的{{1}}方法属性设置为<form>或GET，并定义其POST属性（=指定的位置）发送表格的数据）
为每个“答案”复选框添加ID。您可以分别为他们提供以下ID：method，R1，R2，R3和R4。为每个输入提供不同的名称。
通过添加属性R5来停用“答案”复选框。由于您只希望响应选中/取消选中复选框，因此我们希望阻止用户执行此操作。

<强>例如

disabled

在每个“答案”文字输入中添加以下事件：
- <input type="radio" value="1" name="R1" id="R1" disabled>，其中onkeyup="toggle_checkbox(this, i);"应该是与相关复选框的i相关的索引（请查看下面的示例）。每当我们在“Answer”文本框中键入内容时，都会调用ID函数，并检查或取消选中与我们输入的文本输入相关联的复选框，具体取决于后者的内容：
  - 如果texbox的内容为空，则该功能取消选中该复选框，
  - 否则，它会检查它。
- toggle_checkbox阻止将内容从给定文本框复制到另一个文本框。

<强>例如

ondragstart="return false"

在上面的示例中，<td width="161"> <input type="text" name="cb1" size="20" style="width:300px;" maxlength="100" onkeyup="toggle_checkbox(this, 1);" ondragstart="return false"></td> <td> <input type="radio" value="1" name="R1" id="R1" disabled> Answer </td>等于i，这与相关复选框的ID 1相关。

在R1中，添加以下JS函数：
```
<head>
```

如您所见，有两个功能：一个是function toggle_checkbox(el, index) { var val = el.value; if(val!="") { document.getElementById("R"+index).checked = "checked"; } else { document.getElementById("R"+index).checked = ""; } } function validate() { var isok = false; var nb_checked = 0; for(var i =1; i<6; i++) { var el = document.getElementById("R"+i); if(el.checked) { nb_checked++; } } if(nb_checked < 3) { alert("Enter at least 3 responses!"); } else { isok = true; } return isok; }，另一个是toggle_checkbox。

如前所述，每当我们在“Answer”文本框中输入内容时，都会调用函数validate。这会根据相应文本框的内容是否为空来检查/取消选中相关的复选框。
提交表单时会调用函数toggle_checkbox。它计算使用变量validate检查的“答案”复选框的数量。如果此数字低于nb_checked，则我们会提醒消息3。否则，我们将输出变量Enter at least 3 responses!设置为isok，这将允许处理表单并将其发送到true的{{1}}属性中提供的链接

完整的工作示例：

action

PS：更改表单的<form>属性。我设置google的网址只是为了让您在表单有效时看到重定向。

希望这会有所帮助。如果您有任何问题，请告诉我。

在javascript中验证多个文本框

1 个答案:

完整的工作示例：