Question

下面是我的电台选择代码：

           <div id="box" class="col-md-4">
                <div class="panel panel-default">
                   <div class="panel-heading" id="ph">
                      <h3 class="panel-title">Title</h3>
                   </div>
                   <div class="panel-body">
                        <div class="radio">
                            <label>
                                <input type="radio" id="anynum">Any number 
                            </label>
                            <label>
                                <input type="radio" id="issuenum" >Issue number 
                            </label>
                        </div>
                       <button class="btn btn-success" onclick="">Apply</button>
                   </div>
                </div>
            </div>

我们如何做到这一点，我们只能从两个中选择一个选项？目前我可以选择这两个选项。

Answer 1

单选按钮的名称应相同 -

<div id="box" class="col-md-4">
<div class="panel panel-default">
    <div class="panel-heading" id="ph">
        <h3 class="panel-title">Title</h3>
    </div>
    <div class="panel-body">
        <div class="radio">
            <label>
                <input type="radio" name="anynum" id="anynum">Any number
            </label>
            <label>
                <input type="radio" name="anynum" id="issuenum">Issue number
            </label>
        </div>
        <button class="btn btn-success" onclick="">Apply</button>
    </div>
</div>

Answer 2

为单选按钮

添加相同的名称属性

已编辑：

<input type="radio" name="number">Any number 

<input type="radio" name="number">Any other number

Answer 3

为两个单选按钮分配相同的名称

<label>
<input type="radio" name="name" id="anynum">Any number        
<label>
<input type="radio" name="name" id="issuenum" >Issue number

Answer 4

使用单选按钮时，您应将其命名为例如。在你的情况下 name="anynum"会阻止您同时选择两个按钮

Answer 5

将name属性添加到input标记，并且您的单选按钮应具有相同的名称值，以使其成为如下所示的组

<div id="box" class="col-md-4">
    <div class="panel panel-default">
       <div class="panel-heading" id="ph">
          <h3 class="panel-title">Title</h3>
       </div>
       <div class="panel-body">
            <div class="radio">
                <label>
                    <input type="radio" id="anynum" name="group1">Any number 
                </label>
                <label>
                    <input type="radio" id="issuenum" name="group1">Issue number 
                </label>
            </div>
           <button class="btn btn-success" onclick="">Apply</button>
       </div>
    </div>
</div>

Answer 6

当您点击一个单选按钮时，它会被检查，并且所有其他具有相同名称的单选按钮都将取消选中

<div id="box" class="col-md-4">
            <div class="panel panel-default">
               <div class="panel-heading" id="ph">
                  <h3 class="panel-title">Title</h3>
               </div>
               <div class="panel-body">
                    <div class="radio">
                    <div class="btn-group">
                        <label>
                            <input type="radio" id="anynum" name="any">Any number 
                        </label>
                        <label>
                            <input type="radio" id="issuenum" name="any">Issue number 
                        </label>
                    </div>
                    </div>
                   <button class="btn btn-success" onclick="">Apply</button>
               </div>
            </div>
        </div>

在bootstrap无线电中只选择一个选项

6 个答案: