Question

我正在为Pathfinder广告系列创建角色扮演游戏调查问卷。我想创造一种可以根据他们如何回答列出的问题为角色提供各种奖励。我打算调整下面的内容，我只需要知道如何编写显示为每个问题选择的输入单选按钮值的代码。

以下是代码：

<!DOCTYPE html>
<html>
<script>

function myFunction()
{
var queone = document.getElementById("qone").value;
var quetwo = document.getElementById("qtwo").value;
var quethr = document.getElementById("qthr").value;

if (queone == 1) { 
alert("You are now +2 Acrobatics");
}
else if (queone == 2) {
alert("You are now +2 to Bluff");
}
else if (queone == 3) {
alert("You are now +2 Diplomacy");
}

if (quetwo == 1) { 
alert("You are now +2 Acrobatics");
}
else if (quetwo == 2) {
alert("You are now +2 to Bluff");
}
else if (quetwo == 3) {
alert("You are now +2 Diplomacy");
}

if (quethr == 1) { 
alert("You are now +2 Acrobatics");
}
else if (quethr == 2) {
alert("You are now +2 to Bluff");
}
else if (quethr == 3) {
alert("You are now +2 Diplomacy");
}
}
</script>

<div>



<h2 align="center">Fantasy Survey</h2>
<p>Do you love fantasy games?</p></br></br>
<input id="qone" name="radio1" value="1" checked="" type="radio">Yes</br></br>
<input id="qone" name="radio1" value="2" type="radio">Meh</br></br>
<input id="qone" name="radio1" value="3" type="radio">No</br></br>
<p>Have you ever considered playing pen and paper games?</p></br></br>
<input id="qtwo" name="radio2" value="1" checked="" type="radio"> Yes</br></br>
<input id="qtwo" name="radio2" value="2" type="radio"> Meh</br></br>
<input id="qtwo" name="radio2" value="3" type="radio"> No</br></br>
<p>Do you like Pathfinder?</p></br></br>
<input id="qthr" name="radio3" value="1" checked="" type="radio"> Yes</br></br>
<input id="qthr" name="radio3" value="2" type="radio"> Meh</br></br>
<input id="qthr" name="radio3" value="3" type="radio"> No</br></br>
<input type="button" onclick="myFunction()" value="Submit" />


</div>
</html>

我希望显示一个带有角色奖励的提醒，具体取决于他们通过单选按钮值进行的选择。我觉得我很接近，但我不知道如何只提醒与所选特定单选按钮相关的值。如果你有更好的方法，我很高兴听到它，但我希望它与我上面发布的内容类似。

感谢您的时间!!

Answer 1

首先必须是唯一的ID。所以需要更正。更改这些并尝试jquery选择器。如果您不熟悉这种脚本语言，我建议您尝试this

这是工作代码

var queone =   $( "input[type='radio'][name='radio1']" ).val();
var quetwo =   $( "input[type='radio'][name='radio2']" ).val();
var quethree = $( "input[type='radio'][name='radio3']" ).val();

if (queone == 1) { 
  alert("You are now +2 Acrobatics");
}
else if (queone == 2) {
  alert("You are now +2 to Bluff");
}
else if (queone == 3) {
 alert("You are now +2 Diplomacy");
}

if (quetwo == 1) { 
  alert("You are now +2 Acrobatics");
 }
else if (quetwo == 2) {
  alert("You are now +2 to Bluff");
 }
 else if (quetwo == 3) {
   alert("You are now +2 Diplomacy");
 }

 if (quethree == 1) { 
   alert("You are now +2 Acrobatics");
  }
else if (quethree == 2) {
  alert("You are now +2 to Bluff");
 }
else if (quethree == 3) {
   alert("You are now +2 Diplomacy");
 }

Answer 2

首先，您为不同的元素提供相同的id值。 id属性对于所有元素都应该是唯一的。在您的情况下，getElementById将始终返回其遇到的第一个项目，而不一定是所选项目。

你可以做的是使用querySelector功能，该功能应该从IE8向上，以及所有其他浏览器。

document.querySelector("input[name=radio1]:checked")应该会返回正确的项目。

您可以随时查看jQuery作为有用的库，但这不是。

Answer 3

您可以使用此代码

<!DOCTYPE html>
<html>
<script>

function myFunction()
{
    for(k=1; k<=3; k++)
        checkVal(document.getElementsByName("radio"+k))     

}

function checkVal(selector){
for (var i = 0; i < selector.length; i++) {       
        if (selector[i].checked) {
            switch (selector[i].value){
                case '1' :
                    alert("You are now +2 Acrobatics")
                    break;
                case '2' :
                    alert("You are now +2 to Bluff")
                    break;
                case '3' :
                    alert("You are now +2 Diplomacy")
                    break;  

                }

            break;  

        }
    }
}
</script>

<div>
  <h2 align="center">Fantasy Survey</h2>
  <p>Do you love fantasy games?</p></br></br>
  <input name="radio1" value="1" checked="" type="radio">Yes</br></br>
  <input name="radio1" value="2" type="radio">Meh</br></br>
  <input name="radio1" value="3" type="radio">No</br></br>
  <p>Have you ever considered playing pen and paper games?</p></br></br>
  <input name="radio2" value="1" checked="" type="radio">Yes</br></br>
  <input name="radio2" value="2" type="radio">Meh</br></br>
  <input name="radio2" value="3" type="radio">No</br></br>
  <p>Do you like Pathfinder?</p></br></br>
  <input name="radio3" value="1" checked="" type="radio">Yes</br></br>
  <input name="radio3" value="2" type="radio">Meh</br></br>
  <input name="radio3" value="3" type="radio">No</br></br>
  <input type="button" onclick="myFunction()" value="Submit" />
</div>
</html>

根据所选的单选按钮显示带消息的警报

3 个答案: