Question

使用给定的HTML，它选择两个无线电，尽管名称相同模式

<div class="row margin-top">
    <div class="col-md-3 col-md-offset-1">
        <form action="" method="post">
            <div class="form-group">
                <label>
                    <input type="radio" value="keyword" name="mode">
                    Search by Keyword
                </label>
            </div>
        </form>
    </div>
    <div class="col-md-5">
        <form action="" method="post">
            <div class="form-group">
                <input type="text" name="keyword" class="form-control">
            </div>
        </form>
    </div>
</div>
<div class="row margin-top">
    <div class="col-md-11 col-md-offset-1">
        <form action="" method="post">
            <div class="form-group">
                <label>
                    <input type="radio" value="criteria" name="mode">
                    Search by Criteria
                </label>
            </div>
        </form>
    </div>
</div>

Answer 1

这是因为两者都在不同的<form> s。您需要将它们放在一个<form>中。请将它们放在一个<form>中以获得预期的行为。

多个表单可以具有相同的选项。例如，可以使用Yes和No选项的单个表单。

<div>
  <form action="">
    <p>Do you have Item 1?</p>
    <label><input type="radio" name="has"> Yes</label>
    <label><input type="radio" name="has"> No</label>
  </form>
</div>
<div>
  <form action="">
    <p>Do you have Item 2?</p>
    <label><input type="radio" name="has"> Yes</label>
    <label><input type="radio" name="has"> No</label>
  </form>
</div>
<div>
  <form action="">
    <p>Do you have Item 3?</p>
    <label><input type="radio" name="has"> Yes</label>
    <label><input type="radio" name="has"> No</label>
  </form>
</div>
<div>
  <form action="">
    <p>Do you have Item 4?</p>
    <label><input type="radio" name="has"> Yes</label>
    <label><input type="radio" name="has"> No</label>
  </form>
</div>
<div>
  <form action="">
    <p>Do you have Item 5?</p>
    <label><input type="radio" name="has"> Yes</label>
    <label><input type="radio" name="has"> No</label>
  </form>
</div>

Answer 2

因为您使用3种不同形式的单选按钮。 尝试以单一形式提供

Answer 3

你想在那里实现什么？它不是很清楚。您为每个元素使用了一个表单，而不是一个表单用于所有元素。

您拥有所有无线电元素的相同名称，这意味着您在提交表单时只会获得1个值（发布数据）。您应该提供不同的名称和不同的ID，以便添加javascript交互性。

为什么选择两个单选按钮？

3 个答案: