我如何使用JavaScript在多个问题上优先选择无线电选择

我正在尝试教自己如何制作一个基于我选择的游戏，我得到了另一个页面的链接(但不发送表格 - 我正在尝试制作此节目在同一页面上(。在这种情况下，我有三个问题，我想做的是如果有任何问题标记为"是"，请链接1显示。现在，如果我选择是，是，否，链接2显示。

另外，是否有一种方法可以将值发送到该函数，但仅在进行最后一次选择后才触发DIVS？我猜是像提交按钮一样可用的。如果我走那条路线，如何将收音机按钮的值发送到功能？

window.onload = function() {
  document.getElementById('link1').style.display = 'none';
  document.getElementById('link2').style.display = 'none';
};
function showdiv(x)
{
    if (x==1){
    document.getElementById('link1').style.display='block';
    document.getElementById('link2').style.display='none';
    }
    else {
    document.getElementById('link1').style.display='none';
    document.getElementById('link2').style.display='block';
    }
    return;
}

<body>
<label>Do you need equipment?</label>
<input type="radio" onclick="showdiv(1)" name="q1">Yes
<input type="radio" onclick="showdiv(0)" name="q1">No
</br>
<label>Do you need food?</label>
<input type="radio" onclick="showdiv(1)" name="q2">Yes
<input type="radio" onclick="showdiv(0)" name="q2">No
</br>
<label>Do you need help?</label>
<input type="radio" onclick="showdiv(1)" name="q3">Yes
<input type="radio" onclick="showdiv(0)" name="q3">No
</br>
<div id="link1">
Show Link 1
</div>
<div id="link2">
Show Link 2
</div>
</body>

问题发生了，因为每次单击答案时该功能会触发。当您在问题3上选择" no"时，变量x等于0，因此该函数的作用并隐藏链接1并显示链接2。

如果您想使用按钮提交答案，则您的代码看起来像这样：

window.onload = function() {
  document.getElementById('link1').style.display = 'none';
  document.getElementById('link2').style.display = 'none';
};
var x, y, z;
function a1(answer1){
x = answer1;
console.log(x);
};
function a2(answer2){
y = answer2;
console.log(y);
};
function a3(answer3){
z = answer3;
console.log(z);
};
function showdiv()
{
    if (x==1 | y==1 | z==1){
    console.log("One of the questions is 1");
    document.getElementById('link1').style.display='block';
    document.getElementById('link2').style.display='none';
    }
    else {
    console.log("None of the questions is 1");
    document.getElementById('link1').style.display='none';
    document.getElementById('link2').style.display='block';
    }
    return;
}

<body>
<label>Do you need equipment?</label>
<input type="radio" onclick="a1(1)" name="q1">Yes
<input type="radio" onclick="a1(0)" name="q1">No
</br>
<label>Do you need food?</label>
<input type="radio" onclick="a2(1)" name="q2">Yes
<input type="radio" onclick="a2(0)" name="q2">No
</br>
<label>Do you need help?</label>
<input type="radio" onclick="a3(1)" name="q3">Yes
<input type="radio" onclick="a3(0)" name="q3">No
</br>
<button onclick="showdiv()">Submit</button>
<div id="link1">
Show Link 1
</div>
<div id="link2">
Show Link 2
</div>
</body>

希望这很有用。

相关内容

最新更新

热门标签：