Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Select only one option in bootstrap radio

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.

like image 635
Coolguy Avatar asked Nov 28 '22 20:11

Coolguy


2 Answers

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>

like image 184
Zafar Ahmad Avatar answered Nov 30 '22 09:11

Zafar Ahmad


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 
like image 27
Kushal Avatar answered Nov 30 '22 10:11

Kushal