How do I make a radio button only able to select 1 option per group?
Question
I have 5 radio button groups. I am wanting the user to only be able to select one part in each radio group. My first group works fine and is only selecting one part, however the other groups when I select something instead of the selected button moving from 1 it selects another part.
The code I have for this is:
<html>
<head>
<title> Checkboxes and radio buttons assignment 4 </title>
</head>
<body>
<form name=form1>
<h2>Complete the following</h2>
<hr>
Tick the box if you have the following:
<h2>History of Hereditary Disease </h2>
Heart <input type="checkbox" name=chkHeart value="Heart"> <br><br>
Asthma <input type="checkbox" name=chkAsthma value="Asthma">
<br><br>
Arthritis <input type="checkbox" name=chkArthritis
value="Arthritis">
<br>
<hr>
Select the button that describes you:
<h2>Exercise</h2>
<input type="radio" name=radspeed CHECKED onclick="return
Frequently_onclick(0)" value="Frequently"> Frequently
<input type="radio" name=radspeed onclick="return Average_onclick(1)" value="Average"> Average
<input type="radio" name=radspeed onclick="return Seldom_onclick(2)" value="Seldom"> Seldom
<br>
<hr>
<h2>Diet</h2>
<input type="radio" name=Low Fat CHECKED onclick="return LowFat_onclick(0)" value="Low Fat"> Low Fat
<input type="radio" name=Average onclick="return AverageFat_onclick(1)" value="Average"> Average
<input type="radio" name=High Fat onclick="return HighFat_onclick(2)" value="High Fat"> High Fat
<br>
<hr>
<h2>Alcohol</h2>
<input type="radio" name=LightAlcohol CHECKED onclick="return LightAlcohol_onclick(0)" value="Light"> Light
<input type="radio" name=MediumAlcohol onclick="return MediumAlcohol_onclick(1)" value="Medium"> Medium
<input type="radio" name=HeavyAlcholo onclick="return HeavyAlcohol_onclick(2)" value="Heavy"> Heavy
<br>
<hr>
<h2>Smoking</h2>
<input type="radio" name=NonSmoker CHECKED onclick="return NonSmoker_onclick(0)" value="Non-Smoker"> Non-Smoker
<input type="radio" name=LightSmoker onclick="return LightSmoker_onclick(1)" value="Light"> Light
<input type="radio" name=HeavySmoker onclick="return HeavySmoker_onclick(2)" value="Heavy"> Heavy
<br>
<hr>
<h2>General Health</h2>
<input type="radio" name=GoodHealth CHECKED onclick="return GoodHealth_onclick(0)" value="Good"> Good
<input type="radio" name=AverageHealth onclick="return AverageHealth_onclick(1)" value="Average"> Average
<input type="radio" name=PoorHealth onclick="return PoorHealth_onclick(2)" value="Poor"> Poor
<br>
<br>
<hr>
</form>
</body>
</html>
1 answers
solution1
3 ACCPTED 2016-02-25 13:05:14
You have to set same name for specific group.
Your first group have a same name and another group with different name.
You can check it Here
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.
Related Question
How do I select only one div between a group of divs like a radio button?
How do I show or hide the <option>s based on what is clicked from an outside radio button group?
How do I select a second radio button group automatically by selecting the first group?
How do I make sure the first option of a radio group element is selected by default in this Angular Material app?
How do I make radio button hidden until a option is selected in dropdown?
How do I make the first radio button option of a list of inputs selected by default on Shopify?
Not able to select the Radio button
not able to select radio button
Radio button not able to select
How do I select only one radio button from two different form sets?
Related Tags