Radio button is not working properly

Question

In my web page I have placed some radio buttons. But these buttons are not working properly. I can check multiple buttons.

code:

Answer 1

Name attribute needs to be the same. Name groups radio buttons together to make them one unit.

Answer 2

Give same name to all radio button from which you want to select one option

<label for="abc" style="margin-top:-20px;margin-left:40px">xyz</label>
<input type="radio" id="abc" name="abc" >        
<label for="bcd" style="margin-top:-20px;margin-left:40px">abc</label>
<input type="radio" id="bcd" name="abc" >
<label for="efg" style="margin-top:-20px;margin-left:40px">ccc</label>
<input type="radio" id="efg" name="abc" >

Now it will work properly

Answer 3

<label for="abc" style="margin-top:-20px;margin-left:40px">xyz</label>
<input type="radio" id="abc" name="abc" >        
<label for="bcd" style="margin-top:-20px;margin-left:40px">abc</label>
<input type="radio" id="bcd" name="abc" >
<label for="efg" style="margin-top:-20px;margin-left:40px">ccc</label>
<input type="radio" id="efg" name="abc" >

All inputs must have the same name="" attribute value

Answer 4

The name setting tells which group of radio buttons the field belongs to. When you select one button, all other buttons in the same group are unselected. If you couldn't define which group the current button belongs to, you could only have one group of radio buttons on each page. e.g :

<input type="radio" name="fruit1" value="Apple"> Apple <br>
<input type="radio" name="fruit1" value="Apricot" checked> Apricot <br>
<input type="radio" name="fruit1" value="Avocado"> Avocado
<hr>
<input type="radio" name="fruit2" value="Banana"> Banana<br>
<input type="radio" name="fruit2" value="Breadfruit"> Breadfruit<br>
<input type="radio" name="fruit2" value="Bilberry" checked>  Bilberry

Answer 5

Give the name the same attribute. The checked attribute can be used to indicate which value should be selected. Somewhere in your syntax for the value you want checked write checked="checked"

Answer 6

Because you've different value for name attribute, they should have a common name value, just like you group items.. for example

<input type="radio" name="group1" />
<input type="radio" name="group1" />
<input type="radio" name="group1" />

<!-- You can select any one from each group -->

<input type="radio" name="group2" />
<input type="radio" name="group2" />
<input type="radio" name="group2" />

Demo