I have three different groups named “type” below. Under those groups are other groups of buttons with different names. When I choose any of the “type” named radio buttons, I would like to clear(reset) all other radio buttons that may be selected beside the “type” group radio button which is selected.
<input type="radio" value="three egg breakfast" name="type">
<img src="threeeggbreakfasttext.jpg" class="roundcorn">
<input type="radio" value="white toast" name="threeeggtoast">
<img src="whitetext.jpg" width="44" height="26" class="roundcorn">
<label><input type="radio" value="whole wheat toast" name="threeeggtoast">
<img src="wholewheattext.jpg" width="108" height="26" class="roundcorn"></label>
<label><input type="radio" value="hash brown" name="threeeggside">
<img src="hashbrowntext.jpg" class="roundcorn"></label>
<label><input type="radio" value="grits" name="threeeggside">
<img src="gritstext.jpg" width="44" height="26" class="roundcorn"></label>
<input type="radio" value="ultimate omelette" name="type">
<img src="ultimateomelettetext.jpg" class="roundcorn">
<label> <input type="radio" value="bacon" name="omelettemeat">
<img src="bacontext.jpg" class="roundcorn"></label>
<label> <input type="radio" value="ham" name="omelettemeat">
<img src="hamtext.jpg" class="roundcorn"></label>
<label><input type="radio" value="white toast" name="omelettetoast">
<img src="/whitetext.jpg" class="roundcorn"></label>
<label><input type="radio" value="whole wheat toast" name="omelettetoast">
<img src="wholewheattext.jpg" class="roundcorn"></label>
</label><input type="radio" value="pancakes" name="type">
<img src="pancakestext.jpg" class="roundcorn"></label>
<label><input type="radio" value="scrambled eggs" name="pancakeegg">
<img src="scrambledtext.jpg" class="roundcorn"></label>
<label><input type="radio" value="eggs over easy" name="pancakeegg" >
<img src="overeasytext.jpg" class="roundcorn"></label>
<label><input type="radio" value="sausage patties" name="pancakemeat" >
<img src="sausagepattiestext.jpg" class="roundcorn"></label>
<label><input type="radio" value="beef smoked sausage" name="pancakemeat">
<img src="beefsmokedsausagetext.jpg" class="roundcorn"></label>
Answer
const typeInputs = document.querySelectorAll(`input[name=type][type=radio]`) // consider other name
const radioInputs = document.querySelectorAll(`input[type=radio]`) // consider other name
typeInputs.forEach(el => el.addEventListener("click", ({ target }) => {
radioInputs.forEach(input => {
if (input !== target)
input.checked = false;
})
}));