0

我正在为探路者活动创建角色扮演游戏问卷。我想创建一个它来根据角色回答列出的问题的方式为他们提供各种奖励。我打算调整下面的内容，我只需要知道如何编写代码来显示为每个问题选择的输入单选按钮值。

这是代码：

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

我希望根据他们通过单选按钮值所做的选择来显示带有奖励的警报。我觉得我很接近，但我不知道如何只提醒与所选特定单选按钮相关的值。如果您有更好的方法，我很高兴听到它，但我希望它与我在上面发布的内容类似。

谢谢你的时间！！

4

3 回答 3

1

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

这是工作代码

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");
 }
于 2013-10-01T05:54:08.233 回答
1

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

您可以做的是使用该querySelector功能，该功能应该在 IE8 以上以及所有其他浏览器中都可以使用。

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

您始终可以将其jQuery视为有用的库，但这不是必需的。

于 2013-10-01T05:56:42.260 回答
0

您可以使用此代码

<!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>
于 2013-10-01T06:40:26.943 回答