如何让多个单选按钮以不同的形式工作?

时间:2017-02-17 14:38:06

标签: javascript html angularjs css3

我有一堆单独的表格,每个表格都附有一个单选按钮。因为它们是独立的形式,所以它似乎并没有意识到它们仍然是同一个群体。有办法解决这个问题吗?

答案1-8应该都是同一个单选按钮组的一部分,并且一次只能选择其中一个。



<label class="control-label">group 1:</label>
<form class="controls">
  <label class="radio"><input checked id="optionsRadios1" name="optionsRadios" type="radio" value="workTipe1"> answer 1</label>
  <label class="radio"><input checked id="optionsRadios2" name="optionsRadios" type="radio" value="workTipe2"> answer 2</label>
</form>
<form class="controls">
  <label class="radio"><input checked id="optionsRadios1" name="optionsRadios" type="radio" value="workTipe1"> answer 3</label>
  <label class="radio"><input checked id="optionsRadios2" name="optionsRadios" type="radio" value="workTipe2"> answer 4</label>
</form>
<div>
  <form class="controls">
    <label class="radio"><input checked id="optionsRadios1" name="optionsRadios" type="radio" value="workTipe1"> answer 5</label>
    <label class="radio"><input checked id="optionsRadios2" name="optionsRadios" type="radio" value="workTipe2"> answer 6</label>
  </form>
</div>
<form class="controls">
  <label class="radio"><input checked id="optionsRadios1" name="optionsRadios" type="radio" value="workTipe1"> answer 7</label>
  <label class="radio"><input checked id="optionsRadios2" name="optionsRadios" type="radio" value="workTipe2"> answer 8</label>
</form>
&#13;
&#13;
&#13;

这只是我与之合作的一个简单例子。在应用程序中,每个单选按钮都存在于单击按钮时创建的单独表单中。表单本身包含标题和输入框。单选按钮切换在数据库中使用的必需按钮。这些中的每一个都直接与它们实例化的形式相关联。

3 个答案:

答案 0 :(得分:1)

如果我理解你的问题是正确的。请试试我的例子!

<form>
  <fieldset class="radiogroup">
    <legend>Group 1</legend>
    <ul class="radio">
      <li>
        <input type="radio" name="group1" id="answer1" value="deep" />
        <label for="answer1">Answer 1</label>
      </li>
      <li>
        <input type="radio" name="group1" id="answer2" value="thick" />
        <label for="answer2">Answer 2</label>
      </li>
    </ul>
  </fieldset>

  <fieldset class="radiogroup">
    <legend>Group 2</legend>
    <ul class="radio">
      <li>
        <input type="radio" name="group2" id="answer3" value="Answer 3" />
        <label for="answer1">Answer 3</label>
      </li>
      <li>
        <input type="radio" name="group2" id="answer4" value="Answer 4" />
        <label for="answer2">Answer 4</label>
      </li>
    </ul>
  </fieldset>

  <fieldset class="radiogroup">
    <legend>Group 3</legend>
    <ul class="radio">
      <li>
        <input type="radio" name="group3" id="answer5" value="Answer 5" />
        <label for="answer1">Answer 5</label>
      </li>
      <li>
        <input type="radio" name="group3" id="answer6" value="Answer 6" />
        <label for="answer2">Answer 6</label>
      </li>
    </ul>
  </fieldset>
</form>

答案 1 :(得分:0)

如果我理解正确的话。

您的输入广播代码中必须具有相同的名称。把它全部放在一个独特的表单中,然后在你的下一页的动作(post或get)之后使用你想要的值。

答案 2 :(得分:0)

您可以将一个表单嵌入到另一个表单中,这可能会有所帮助:

<form>
  <input checked name="gender" type="radio" value="male"> CHess<br>
  <input name="gender" type="radio" value="female"> Football<br>
  <input name="gender" type="radio" value="other"> Other<br>
  <form>
    <input checked name="gender" type="radio" value="male">Cricket<br>
    <input name="gender" type="radio" value="female"> HOckey<br>
    <input name="gender" type="radio" value="other"> Other
  </form>
</form>