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

Question

below is my code for my radio selection:

           <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>

How do we have to do so that we can select only one option from the two? Currently I can select both option.

Answer 1

Names should be same for radio buttons -

<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

Add the same name attribute to both the radio button

Edited:

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

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

Answer 3

assign same name for both of the radio buttons

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

Answer 4

When using radio button you should name them same for eg. in your case put name="anynum" which will prevent you from selecting both the buttons

Answer 5

add name attribute to input tag and both your radio buttons should have same name value to make them a group like below

<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

When you clicks on a radio-button, it becomes checked, and all other radio-buttons with equal name become unchecked

<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>