时间戳

首页 > 解决方案 > 从不同组中选择单选按钮的组合

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

问题描述

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

});

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

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

标签： javascripthtml

解决方案

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

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>

推荐阅读