select a combinations of radio buttons from different groups

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

});

I'm working on a project in which I have to select a combination of radio buttons from different panels to perform a specific task. For example I have one set of radio buttons named bands and a second set named channels , when I select 1st option from band and 1st option from channels and then click submit button a specific task is performed.And when I select a different combination, a different task will be performed. How it can be done?

<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

Since your description mentions radio buttons and not checkboxes, I converted channels and bands to radio buttons. You are going to want to wrap everything in a form tag. You want to listen for the form submit event, get the selected channel and band values, and do what you need to do depending on what the values are.

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>