javascript - 从不同组中选择单选按钮的组合

Question

$(document).ready(function(){
    document.getElementById("whole").style.display = "block";
    document.getElementById("proto").style.display = "none";
     document.getElementById("peakpro").style.display = "none";

document.getElementById("myform").onsubmit = function(e) {
  e.preventDefault();
  
  var bandSelected = document.querySelector("input[name=band]:checked").value;
  var channelSelected = document.querySelector("input[name=channel]:checked").value;
  var appSelected = document.querySelector("input[name=app]:checked").value;
  
  if(bandSelected == "alpha" && channelSelected == "1" && appSelected == null) {
    document.getElementById("whole").style.display = "none";
    document.getElementById("proto").style.display = "block";
  }
   if(appSelected == "peakperformance" && channelSelected == null && bandSelected == null) {
    document.getElementById("whole").style.display = "none";
    document.getElementById("peakpro").style.display = "block";
 }
  
  //console.log("Band Selected: ", bandSelected, ", Channel Selected: ", channelSelected);
};

});

我正在开发一个项目，在该项目中我必须从不同面板中选择单选按钮的组合来执行特定任务。例如，我有一组名为bands的单选按钮和第二组名为channels的单选按钮，当我从band中选择第一个选项和从channels中选择第一个选项，然后单击提交按钮时，将执行特定任务。当我选择不同的组合时，将执行不同的任务。如何做到？

<div id="whole">
	<div id="bands">
		<h2>Select Band</h2>
		   <input type="checkbox" name="band">Alpha<br>
		   <input type="checkbox" name="band">Beta<br>
		   <input type="checkbox" name="band">Gamma<br>
		   <input type="checkbox" name="band">Theta<br>
		   <input type="checkbox" name="band">Delta<br>
	</div>
	<div id="channel">
		<h2>Select channel</h2>
		<input type="checkbox" name="channel"> Channel 1<br>
		<input type="checkbox" name="channel"> Channel 2<br>
		<input type="checkbox" name="channel"> Channel 3<br>
        <input type="checkbox" name="channel"> Channel 4<br>
		<input type="checkbox" name="channel"> Channel 5<br>
		<input type="checkbox" name="channel"> Channel 6<br>
		<input type="checkbox" name="channel"> Channel 7<br>
		<input type="checkbox" name="channel"> Channel 8<br>
		<input type="checkbox" name="channel"> Channel 9<br>
		<input type="checkbox" name="channel"> Channel 10<br>
		<input type="checkbox" name="channel"> Channel 11<br>
		<input type="checkbox" name="channel"> Channel 12<br>
		<input type="checkbox" name="channel"> Channel 13<br>
		<input type="checkbox" name="channel"> Channel 14<br>
	</div>
	<button type="submit" id="subtest" onclick>Submit</button>
	<div id="app">
		<h2>Training Applications</h2>
            <input type="radio" name="app">ADHD<br>
            <input type="radio" name="app">Stress<br>
            <input type="radio" name="app">Anxiety<br>
            <input type="radio" name="app">Peak Performance<br>
            <!--<button type="submit" id="subapp">Submit</button>-->
	</div>
	
  </div>

Answer 1

由于您的描述提到了单选按钮而不是复选框，因此我将 channel 和频段转换为单选按钮。您需要将所有内容包装在 form 标记中。您想要监听表单提交事件，获取选定的 channel 和频段值，并根据这些值执行您需要执行的操作。

document.getElementById("myForm").onsubmit = function(e) {
  e.preventDefault();
  
  var bandSelected = document.querySelector("input[name=band]:checked");
  var channelSelected = document.querySelector("input[name=channel]:checked");
  var appSelected = document.querySelector("input[name=app]:checked");
  
  if(bandSelected != null && bandSelected.value == "Gamma" && channelSelected != null && channelSelected.value == "1") {
    console.log("Do something special here");
  }
  
  if(bandSelected == null && channelSelected == null && appSelected != null && appSelected.value == "Peak Performance") {
    console.log("hide or show div");
    // show
    // document.getElementById("yourDiv").style.display = "block";
    // hide
    // document.getElementById("yourDiv").style.display = "none";
  }

};

<form id="myForm">
	<div id="whole">
		<div id="bands">
			<h2>Select Band</h2>
			   <input type="radio" value="Alpha" name="band">Alpha<br>
			   <input type="radio" value="Beta" name="band">Beta<br>
			   <input type="radio" value="Gamma" name="band">Gamma<br>
			   <input type="radio" value="Theta" name="band">Theta<br>
			   <input type="radio" value="Delta" name="band">Delta<br>
		</div>
		<div id="channel">
			<h2>Select channel</h2>
			<input type="radio" value="1" name="channel"> Channel 1<br>
			<input type="radio" value="2" name="channel"> Channel 2<br>
			<input type="radio" value="3" name="channel"> Channel 3<br>
			<input type="radio" value="4" name="channel"> Channel 4<br>
			<input type="radio" value="5" name="channel"> Channel 5<br>
			<input type="radio" value="6" name="channel"> Channel 6<br>
			<input type="radio" value="7" name="channel"> Channel 7<br>
			<input type="radio" value="8" name="channel"> Channel 8<br>
			<input type="radio" value="9" name="channel"> Channel 9<br>
			<input type="radio" value="10" name="channel"> Channel 10<br>
			<input type="radio" value="11" name="channel"> Channel 11<br>
			<input type="radio" value="12" name="channel"> Channel 12<br>
			<input type="radio" value="13" name="channel"> Channel 13<br>
			<input type="radio" value="14" name="channel"> Channel 14<br>
		</div>
		
		<div id="app">
			<h2>Training Applications</h2>
				<input type="radio" value="ADHD" name="app">ADHD<br>
				<input type="radio" value="Stress" name="app">Stress<br>
				<input type="radio" value="Anxiety" name="app">Anxiety<br>
				<input type="radio" value="Peak Performance" name="app">Peak Performance<br>
                <button type="submit" id="subtest" onclick>Submit</button>
		</div>
	  </div>

          <div id="proto">
		<h1>Select Protocol</h1>
		<input type="radio" name="pro" value="increase">Increase Alpha<br>
		<input type="radio" name="pro" value="reduce">Reduce Alpha<br>
	</div>

	<div id="peakpro">
		<h1>Select Protocol</h1>
		<h2>Improvement of Attention</h2>
		  <input type="radio" name="Attention" value="incbeta">Increase Beta<br>
		  <input type="radio" name="Attention" value="redtheta">Reduce Theta<br>
		<h2>Improvement of Relaxation</h2>
		  <input type="radio" name="Relaxation" value="incalpha">Increase Alpha<br>
		  <input type="radio" name="Relaxation" value="inctheta">Increase Theta<br>
		<h2>Assistance with Meditation</h2>
		  <input type="radio" name="Meditation" value="inalpha">Increase Alpha<br>
		  <input type="radio" name="Meditation" value="intheta">Increase Theta<br>
	</div>

  </form>