Question

我有两个表格

其中只有一个正在工作，可能是“示例2”

两者在功能上几乎相同

“示例1”是有问题的示例，“示例2”效果很好。

 <h4>example 1<h4/>


<form class="answerFormClass" action="http://127.0.0.1:5000" method="PSOT" >

 <div name="choiceDivName_0" id="choiceDivId_0">
  <input type="radio" name="choice_radio_0" id="choiceId_radio_0" value="get">
  <label for="choiceId_radio_0">get</label>
</div>
<div name="choiceDivName_1" id="choiceDivId_1">
  <input type="radio" name="choice_radio_1" id="choiceId_radio_1" value="give">
  <label for="choiceId_radio_1">give</label>
</div>
<div name="choiceDivName_2" id="choiceDivId_2">
  <input type="radio" name="choice_radio_2" id="choiceId_radio_2" value="gone">
  <label for="choiceId_radio_2">gone</label>
</div>

  <input type="submit" name="submitBtnName" id="submitBtnid" value="CLick here"></button>
</form>

<h4>example 2<h4/>

<form action="/action_page.php">
  <label for="male">Male</label>
  <input type="radio" name="gender" id="male" value="male"><br>
  <label for="female">Female</label>
  <input type="radio" name="gender" id="female" value="female"><br>
  <label for="other">Other</label>
  <input type="radio" name="gender" id="other" value="other"><br><br>
  <input type="submit" value="Submit">
</form>

这是codepen中的代码：https://codepen.io/anon/pen/zbOOMM?editors=1010

*“示例1”是由在线动态 java脚本创建的“示例2” *

Answer 1

因为单选按钮根据具有相同的 name 进行分组，但是您的单选按钮都具有不同的名称。要制作一组单选按钮，请将它们都设置为相同的name属性。

（旁注：您通常不需要单选按钮元素上的id属性，但是如果您有一个属性，则不必与其name相同。）

此处它们具有相同的name：

<h4>example 1<h4/>

<form class="answerFormClass" action="http://127.0.0.1:5000" method="PSOT" >

 <div name="choiceDivName_0" id="choiceDivId_0">
  <input type="radio" name="choice" id="choiceId_radio_0" value="get">
  <label for="choiceId_radio_0">get</label>
</div>
<div name="choiceDivName_1" id="choiceDivId_1">
  <input type="radio" name="choice" id="choiceId_radio_1" value="give">
  <label for="choiceId_radio_1">give</label>
</div>
<div name="choiceDivName_2" id="choiceDivId_2">
  <input type="radio" name="choice" id="choiceId_radio_2" value="gone">
  <label for="choiceId_radio_2">gone</label>
</div>

  <input type="submit" name="submitBtnName" id="submitBtnid" value="CLick here">
</form>

为什么我可以选择这种形式的多个单选按钮？

1 个答案: