$(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中选择第一个选项并从通道中选择第一个选项，然后单击Submit按钮时，将执行特定任务。当我选择其他组合时，一个将执行不同的任务。怎么做？
<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>
答案 0 :(得分：2)
由于您的描述中提到的是单选按钮，而不是复选框，因此我将频道和波段转换为单选按钮。您将需要将所有内容包装在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>