CODEWITHSUNDEEP
html
Sherry
Sherry

Reputation: 325

unable to select one radio button at a time

I am unable to select one radio button at a time. Multiple buttons are getting selected. I am newbie to html. This is my code. Please help.

<form name="ans_a" onsubmit="return answer_a()">
    <table align="center" border="1">
        <br>
        <br>
        <tr>
            <td width="500px"> ABC 
                <br>
                <input type="radio" name="A" value="a" id="radio1"> A &nbsp Option A <br>
                <input type="radio" name="B" value="b" id="radio2"> B &nbsp Option B <br>
                <input type="radio" name="C" value="c" id="radio3"> C &nbsp Option C <br>
                <input type="radio" name="D" value="d" id="radio4"> D &nbsp Option D <br>
                <br>
                &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
                <input type="button" name="ans1" value="Next" onclick="answer_a()">
            </td>
        </tr>
    </table>
</form>

Upvotes: 7

Views: 24961

Answers (3)

Dipesh Parmar
Dipesh Parmar

Reputation: 27382

The name attribute must be the same to select only one radio button at a time. The id could be different depending on if you want to capture that somewhere which one of the radio buttons is selected. 

<input type="radio" name="A" value="a" id="radio1"> A &nbsp Option A <br>
<input type="radio" name="A" value="b" id="radio2"> B &nbsp Option B <br>
<input type="radio" name="A" value="c" id="radio3"> C &nbsp Option C <br>
<input type="radio" name="A" value="d" id="radio4"> D &nbsp Option D <br>

Upvotes: 15

Anburaj_N
Anburaj_N

Reputation: 109

try same name for all the radio buttons i used like this in my project

 <div class="col-md-2">   <label><input type="radio" class="classone" name="A">Daily</label> </div>
 <div class="col-md-2">   <label><input type="radio" class="classone" name="A">Weekly</label> </div>
 <div class="col-md-2">   <label><input type="radio" class="classone" name="A">Monthly</label> </div>
 <div class="col-md-2">   <label><input type="radio" class="classone" name="A">Yearly</label> </div>

Upvotes: 0

Zero Fiber
Zero Fiber

Reputation: 4465

To select only one radio button, you have to put them under one group, i.e make the name attribute same for all of them.

<input type="radio" name="options" value="a" id="radio1"> A &nbsp Option A <br>
<input type="radio" name="options" value="b" id="radio2"> B &nbsp Option B <br>
<input type="radio" name="options" value="c" id="radio3"> C &nbsp Option C <br>
<input type="radio" name="options" value="d" id="radio4"> D &nbsp Option D <br>

Upvotes: 3

Related Questions