【问题标题】:how can i group radio buttons that are in different div tag [duplicate]我如何对不同 div 标签中的单选按钮进行分组[重复]
【发布时间】:2014-07-10 00:11:54
【问题描述】:

我在不同的div 中放置了单选按钮。我怎样才能只选择其中一个?

<div><input type="radio" /></div>
<div><input type="radio" /></div>
<div><input type="radio" /></div>
<div><input type="radio" /></div>

【问题讨论】:

  • 为所有这些输入提供相同的名称。

标签: jquery html css


【解决方案1】:

radio 输入按name 属性分组,这是保持 HTML 有效性所必需的。它还可以在服务器端检索选定的值。

<div><input type="radio" name="foo" /></div>
<div><input type="radio" name="foo" /></div>
<div><input type="radio" name="foo" /></div>
<div><input type="radio" name="foo" /></div>

【讨论】:

    【解决方案2】:

    为这些单选按钮使用相同的name 属性和不同的value

    【讨论】:

    • @RoryMcCrossan 我们如何为单选按钮保持相同的值? radio 按钮应该有相同的名称,每个单选按钮应该有不同的值,以便它可以在服务器端使用。例如,两个具有相同名称 sex 但值不同的单选按钮 malefemale 以便我们可以在服务器端使用名称 sex 获取该单选按钮的值..
    • 你是对的。我看错了你的回答。
    【解决方案3】:

    将它们放在不同的表单标签中

    <div><form>
    <fieldset>
        <legend>Group 1</legend>
        <label class="radio-inline">
            <input type="radio" name="radio" value="1">Group 1 Option 1</label>
        <label class="radio-inline">
            <input type="radio" name="radio" value="2">Group 1 Option 2</label>
        <label class="radio-inline">
            <input type="radio" name="radio" value="3">Group 1 Option 3</label>
    </fieldset>
    </form>
    <form>
    <fieldset>
        <legend>Group 2</legend>
        <label class="radio-inline">
            <input type="radio" name="radio" value="1">Group 2 Option 1</label>
        <label class="radio-inline">
            <input type="radio" name="radio" value="2">Group 2 Option 2</label>
        <label class="radio-inline">
            <input type="radio" name="radio" value="3">Group 2 Option 3</label>
    </fieldset>
    </form>
    

    【讨论】:

      【解决方案4】:

      为每个收音机添加一个属性name="myRadio"

      【讨论】:

        猜你喜欢
        • 2012-07-10
        • 2019-06-03
        • 1970-01-01
        • 2012-02-14
        • 2011-11-01
        • 2013-06-14
        • 2013-01-25
        • 2013-06-02
        • 2011-01-11
        相关资源
        最近更新 更多