如何通过选择特定的单选按钮组来重置许多单选按钮组答案

【问题标题】：How can I reset many radio button groups by selecting a specific radio button group如何通过选择特定的单选按钮组来重置许多单选按钮组
【发布时间】：2021-01-26 05:32:45
【问题描述】：

我在下面有三个名为“type”的不同组。在这些组下是其他具有不同名称的按钮组。当我选择任何名为“类型”的单选按钮时，我想清除（重置）在选中的“类型”组单选按钮旁边可能选择的所有其他单选按钮。

         <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>

【问题讨论】：

标签： javascript php html radio-button

【解决方案1】：

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;
  })
}));

【讨论】：

奥古斯丁！ - 太棒了！非常好的解决方案，完美无瑕！谢谢！