Radio button is not working properly
In my web page I have placed some radio buttons. But these buttons are not working properly. I can check multiple buttons.
code:
<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="bcd" >
<label for="efg" style="margin-top:-20px;margin-left:40px">ccc</label>
<input type="radio" id="efg" name="efg" >
fiddle
I want to check only one button. Please any one help me.
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
<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
Radio buttons which are grouped together must have the same case-sensitive name
property.
<label for="input1">First Input</label>
<input type="radio" id="input1" name="inputGroup" >
<label for="input2">Second Input</label>
<input type="radio" id="input2" name="inputGroup" >
<label for="input3">Third Input</label>
<input type="radio" id="input3" name="inputGroup" >
JSFiddle demo.
From the HTML specification:
Radio buttons are like checkboxes except that when several share the same control
name
, they are mutually exclusive.