Radio button is Selecting multiple items Instead of selecting one item
Question
I am using input type radio like below
<input type="radio" id={el.name} className="form-check-input" name={el.name} data-count={el.name} value={el.id} onChange={this.select_role.bind(this)} style={{margin: "4px 10px"}}/>{el.name}
OnChange function looks like Below
select_role(event){
console.log(event.target);
let attribute = document.getElementById(event.target.name);
let sectorattrribute = attribute.getAttribute("data-count");
this.setState({role_id : event.target.value, roleName: sectorattrribute})
}
The output of above type radio is
OnChange Console lokks like Below
Radio should allow only one item to be selected but why I can able to select multiple at a time and I am unable to deselect also.
But as per radio type doc once, one item is selected other gets deselected but it is happening.
Please guide me where I am doing the mistake.
[![enter image description here][4]][4]
1 answers
solution1
0 ACCPTED 2018-06-21 05:11:07
You just need to set same name field to all radio buttons ,Try this
Example
<!DOCTYPE html> <html> <body> <form action=""> <input type="radio" name="role" value="male">Admin<br> <input type="radio" name="role" value="female">Agent<br> <input type="radio" name="role" value="other"> Director <input type="radio" name="role" value="manager">Manager <input type="radio" name="role" value="client">Client <input type="radio" name="role" value="super admin">Super Admin <input type="radio" name="role" value="admin 1">Admin 1 <input type="radio" name="role" value="admin 2">Admin 2 </form> <p><b>Note:</b> When a user clicks on a radio-button, it becomes checked, and all other radio-buttons with equal name become unchecked.</p> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.