无论如何使用jQuery来选择某个数组值所需的单选按钮？有人可以帮助我或指出我正确的方向吗？ ：）
情况：我正在构建一个游戏，其中问题会根据数组更改值。有4个单选按钮，我希望最终用户选择其中一个，如果数组介于值1和5（例如）之间，但不是任何其他值。
编辑第1部分： 我只想要使用jQuery来选择所需的单选按钮，因为单选按钮实际上出现在整个页面中而不管数组值如何，但我隐藏了它们，除非数组的值为1到1仅限5，所以我想这就是我 使用jQuery的原因。
编辑第2部分： 这是我到目前为止所尝试的： / 我希望最终用户输入一个值才能输入 转到下一个问题 /
var reqChoice = $('answerChoice');
reqChoice[0].required = true;
reqChoice[1].required = true;
reqChoice[2].required = true;
reqChoice[3].required = true;
我添加了评论，因为它不起作用，所以我把它留在我的程序中作为一种记录未来的方式。
<body>
<section class="headingIntroduction">
<div class="headingTitle">
<h2>Welcome to the Halloween Quiz Game!</h2>
<hr/>
<!--The paragraph tag directly below this
is left blank because when the game starts, I want
it to be blank. I only want it to have content on one
particular part of the program only.
-->
<p></p>
<hr/>
</div>
<div class="formInput">
<form>
<input type="radio" id="answerChoice0" name="answerChoice" value="answerChoice0"/><span></span>
<input type="radio" id="answerChoice1" name="answerChoice" value="answerChoice1"/><span></span>
<input type="radio" id="answerChoice2" name="answerChoice" value="answerChoice2"/><span></span>
<input type="radio" id="answerChoice3" name="answerChoice" value="answerChoice3"/><span></span>
<hr/>
</form>
</div>
<div class="submitButton">
<input type="submit" id="submitButton" value="Click Here to Begin!"/>
<br/>
</div>
<div class="userScore">
<h3>Score: 0 </h3>
</div>
</section>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="js/script.js"></script>
</body>
jQuery的：
$(document).ready(function(){
/*
When the page loads, I only want the welcome page to show. I want
everything else to be hidden. Also want answer choices to remain hidden.
*/
$('form').hide();
$('h3').show();
var gameBegin = [
{/*Instructions Page*/
question: 'Welcome to the Game Instructions Page!',
instructions:' You will be presented with several questions. Below each question are a set of answers. Select the answer that you think is correct and then click the "Submit" button to see if your answer is correct. At the end of the game, you will see your final score to let you know how you did.Choose carefully! Once you move onto the next question, you cannot go back!',
choice: '',
correctAnswer: '',
buttonValue: 'Start Game!'
},
{/*question One*/
question: 'What Film Series is Freddy Krueger From?',
instructions: 'Question 1 out of 5',
choice: ['A Nightmare on Elm Street', 'Simpsons Treehouse of Horror', '28 Days Later', 'The Texas Chainsaw Massacre'],
correctAnswer: 0,
buttonValue: 'Submit Answer'
},
{/*Question Two*/
question: 'Which Terrifying Villian Uses a Chainsaw to Murder His Victims?',
instructions: 'Question 2 out of 5',
choice: ['Jason Voorhees', 'Dracula', 'Frankenstein', 'Leatherface'],
correctAnswer: 3,
buttonValue: 'Submit Answer'
},
{/*Question Three*/
question: 'What is the Occupation of Sweeney Todd?',
instructions: 'Question 3 out of 5',
choice: ['Teacher', 'Priest', 'Barber', 'Doctor'],
correctAnswer: 2,
buttonValue: 'Submit Answer'
},
{/*Question Four*/
question: 'Who are the villians in the 1993 film "Hocus Pocus?"',
instructions: 'Question 4 out of 5',
choice: ['The Sanderson Sisters', 'Vlad the Impaler', 'Jigsaw', 'The Blair Witch'],
correctAnswer: 0,
buttonValue: 'Submit Answer'
},
{/*Question Five*/
question: 'Which Serial Killer is Leatherface Based On?',
instructions: 'Question 5 out of 5',
choice: ['Ted Bundy', 'Ed Gein', 'Charles Manson', 'Jack the Ripper'],
correctAnswer: 1,
buttonValue: 'Submit Answer'
},
{/*Game Finished Screen*/
question: 'Congratulations! You Finished The Halloween Quiz Game!',
instructions: 'To play again, click the button below.',
choice: '',
correctAnswer: '',
buttonValue: 'Start New Game'
}
]
/*global variables*/
var gameBeginValue = 0;
var gameScore = 0;
/*Updating the current score*/
var gameScoreLabel = $('h3');
/*Moving from Page to Page When Clicking Submit Button*/
$('#submitButton').on('click',function(){
/*I want the gameBeginValue to reset back to 0 to start a new game
There is no need to reshow the welcome page again. I also want
the radio buttons to only appear if the user is looking at a
question. I am also resetting the score back to 0 because
a new game is started. */
if(gameBeginValue > 6){
gameBeginValue = 0;
gameScore = 0;
gameScoreLabel[0].textContent = 'Score: ' + gameScore;
} else if ((gameBeginValue < 1) || (gameBeginValue > 5)) {
$('form').hide();
}else{
$('form').show();
}
/*Heading at top of Page*/
var questionTitle = $('h2');
questionTitle[0].textContent = gameBegin[gameBeginValue].question;
/*The information section for playing the game*/
var gameInformation = $('p');
gameInformation[0].textContent = gameBegin[gameBeginValue].instructions;
/*Changing the values of the input choices based on question.*/
var questionChoice =$('span');
questionChoice[0].textContent = gameBegin[gameBeginValue].choice[0];
questionChoice[1].textContent = gameBegin[gameBeginValue].choice[1];
questionChoice[2].textContent = gameBegin[gameBeginValue].choice[2];
questionChoice[3].textContent = gameBegin[gameBeginValue].choice[3];
/*Changing the value of the submit button based on what screen you are on */
var buttonDescription = $("#submitButton");
buttonDescription[0].value = gameBegin[gameBeginValue].buttonValue;
/*This is what I am using to choose which question is correct based
on what radio button the user selects. */
if (gameBeginValue==1){
question1();
}else if (gameBeginValue==2){
question2();
}else if (gameBeginValue==3){
question3();
}else if (gameBeginValue==4){
question4();
}else if (gameBeginValue==5){
question5();
}
/*I want the user to have to enter in a radio button before going to next screen*/
/*var reqChoice0 = $('#answerChoice0');
var reqChoice1 = $('#answerChoice1');
var reqChoice2 = $('#answerChoice2');
var reqChoice3 = $('#answerChoice3');*/
if ((gameBeginValue > 0) && (gameBeginValue < 6)) {
$('form').validate({
rules:{
answerChoice0:{
required: true
},
answerChoice1:{
required: true
},
answerChoice2:{
required: true
},
answerChoice3:{
required: true
}
}
})
}
/*$('form').validate({
rules:{
if ((gameBeginValue > 0) && (gameBeginValue < 6)) {
if ((reqChoice0.is('checked', false)) || (reqChoice1.is('checked',false)) || (reqChoice2.is('checked',false)) || (reqChoice3.is('checked',false))) {
alert('select an answer please');
}
}
}
})*/
/*I want the gameBeginValue variable to increase everytime this button is clicked
But I want it to Happen Last.*/
$("input[type=radio]").attr('disabled', false);
gameBeginValue++;
/*I want the radio buttons to all be unchecked at the start of the
next question*/
$('#answerChoice0').prop('checked',false);
$('#answerChoice1').prop('checked',false);
$('#answerChoice2').prop('checked',false);
$('#answerChoice3').prop('checked',false);
})
/*Updates the end users score and tells them if they are correct or not*/
/*Question 1*/
function question1(){
$('#answerChoice0').off('click').on('click',function(){
alert('Correct!');
gameScore = gameScore + 1;
gameScoreLabel[0].textContent = "Score: " + gameScore;
$("input[type=radio]").attr('disabled', true);
})
$('#answerChoice1').off('click').on('click',function(){
alert('Wrong!');
$("input[type=radio]").attr('disabled', true);
})
$('#answerChoice2').off('click').on('click',function(){
alert('Wrong!');
$("input[type=radio]").attr('disabled', true);
})
$('#answerChoice3').off('click').on('click',function(){
alert('Wrong!');
$("input[type=radio]").attr('disabled', true);
})
}
/*Various functions are called based on which question
the user is on*/
/*Question 2*/
function question2(){
$('#answerChoice0').off('click').on('click',function(){
alert('Wrong!');
$("input[type=radio]").attr('disabled', true);
})
$('#answerChoice1').off('click').on('click',function(){
alert('Wrong!');
$("input[type=radio]").attr('disabled', true);
})
$('#answerChoice2').off('click').on('click',function(){
alert('Wrong!');
$("input[type=radio]").attr('disabled', true);
})
$('#answerChoice3').off('click').on('click',function(){
alert('Correct!');
gameScore = gameScore + 1;
gameScoreLabel[0].textContent = "Score: " + gameScore;
$("input[type=radio]").attr('disabled', true);
})
}
/*Question 3*/
function question3(){
$('#answerChoice0').off('click').on('click',function(){
alert('Wrong!');
$("input[type=radio]").attr('disabled', true);
})
$('#answerChoice1').off('click').on('click',function(){
alert('Wrong!');
$("input[type=radio]").attr('disabled', true);
})
$('#answerChoice2').off('click').on('click',function(){
alert('Correct!');
gameScore = gameScore + 1;
gameScoreLabel[0].textContent = "Score: " + gameScore;
$("input[type=radio]").attr('disabled', true);
})
$('#answerChoice3').off('click').on('click',function(){
alert('Wrong!');
$("input[type=radio]").attr('disabled', true);
})
}
/*Question 4*/
function question4(){
$('#answerChoice0').off('click').on('click',function(){
alert('Correct!');
gameScore = gameScore + 1;
gameScoreLabel[0].textContent = "Score: " + gameScore;
$("input[type=radio]").attr('disabled', true);
})
$('#answerChoice1').off('click').on('click',function(){
alert('Wrong!');
$("input[type=radio]").attr('disabled', true);
})
$('#answerChoice2').off('click').on('click',function(){
alert('Wrong!');
$("input[type=radio]").attr('disabled', true);
})
$('#answerChoice3').off('click').on('click',function(){
alert('Wrong!');
$("input[type=radio]").attr('disabled', true);
})
}
/*Question 5*/
function question5(){
$('#answerChoice0').off('click').on('click',function(){
alert('Wrong!');
$("input[type=radio]").attr('disabled', true);
})
$('#answerChoice1').off('click').on('click',function(){
alert('Correct!');
gameScore = gameScore + 1;
gameScoreLabel[0].textContent = "Score: " + gameScore;
$("input[type=radio]").attr('disabled', true);
})
$('#answerChoice2').off('click').on('click',function(){
alert('Wrong!');
$("input[type=radio]").attr('disabled', true);
})
$('#answerChoice3').off('click').on('click',function(){
alert('Wrong!');
$("input[type=radio]").attr('disabled', true);
})
}
})
答案 0 :(得分：1)
我猜你想要jQuery validate插件。 http://jqueryvalidation.org/required-method/ 看看那个页面上的例子，我想你会找到你正在寻找的具体标记的例子＆＃34;使父母＆＃39;仅在年龄低于13岁时才需要。
答案 1 :(得分：1)
我非常感谢所有得到的帮助，我对“Travus Gonzalez”提供的答案有些疑问，因为我没有编写代码的经验（我真的可以做简单的事情，但我正在学习和试图变得更好），所以我所做的就是以下内容：
如果最终用户遇到问题（数组值1到5），则除非最终用户选择单选按钮应答，否则用于移动到下一个问题的按钮将被禁用。
< / LI>我的问题现在已经解决了，谢谢你们的帮助！
我在下面发布了我的新代码，以防有人想看到它：
$(document).ready(function(){
/*
When the page loads, I only want the welcome page to show. I want
everything else to be hidden. Also want answer choices to remain hidden.
*/
$('form').hide();
$('h3').show();
var gameBegin = [
{/*Instructions Page*/
question: 'Welcome to the Game Instructions Page!',
instructions:' You will be presented with several questions. Below each question are a set of answers. Select the answer that you think is correct and then click the "Submit" button to see if your answer is correct. At the end of the game, you will see your final score to let you know how you did.Choose carefully! Once you move onto the next question, you cannot go back!',
choice: '',
correctAnswer: '',
buttonValue: 'Start Game!'
},
{/*question One*/
question: 'What Film Series is Freddy Krueger From?',
instructions: 'Question 1 out of 5',
choice: ['A Nightmare on Elm Street', 'Simpsons Treehouse of Horror', '28 Days Later', 'The Texas Chainsaw Massacre'],
correctAnswer: 0,
buttonValue: 'Submit Answer'
},
{/*Question Two*/
question: 'Which Terrifying Villian Uses a Chainsaw to Murder His Victims?',
instructions: 'Question 2 out of 5',
choice: ['Jason Voorhees', 'Dracula', 'Frankenstein', 'Leatherface'],
correctAnswer: 3,
buttonValue: 'Submit Answer'
},
{/*Question Three*/
question: 'What is the Occupation of Sweeney Todd?',
instructions: 'Question 3 out of 5',
choice: ['Teacher', 'Priest', 'Barber', 'Doctor'],
correctAnswer: 2,
buttonValue: 'Submit Answer'
},
{/*Question Four*/
question: 'Who are the villians in the 1993 film "Hocus Pocus?"',
instructions: 'Question 4 out of 5',
choice: ['The Sanderson Sisters', 'Vlad the Impaler', 'Jigsaw', 'The Blair Witch'],
correctAnswer: 0,
buttonValue: 'Submit Answer'
},
{/*Question Five*/
question: 'Which Serial Killer is Leatherface Based On?',
instructions: 'Question 5 out of 5',
choice: ['Ted Bundy', 'Ed Gein', 'Charles Manson', 'Jack the Ripper'],
correctAnswer: 1,
buttonValue: 'Submit Answer'
},
{/*Game Finished Screen*/
question: 'Congratulations! You Finished The Halloween Quiz Game!',
instructions: 'To play again, click the button below.',
choice: '',
correctAnswer: '',
buttonValue: 'Start New Game'
}
]
/*global variables*/
var gameBeginValue = 0;
var gameScore = 0;
/*Updating the current score*/
var gameScoreLabel = $('h3');
/*Moving from Page to Page When Clicking Submit Button*/
$('#submitButton').on('click',function(){
/*I want the gameBeginValue to reset back to 0 to start a new game
There is no need to reshow the welcome page again. I also want
the radio buttons to only appear if the user is looking at a
question. I am also resetting the score back to 0 because
a new game is started. */
if(gameBeginValue > 6){
gameBeginValue = 0;
gameScore = 0;
gameScoreLabel[0].textContent = 'Score: ' + gameScore;
} else if ((gameBeginValue < 1) || (gameBeginValue > 5)) {
$('form').hide();
}else{
$('form').show();
}
/*Heading at top of Page*/
var questionTitle = $('h2');
questionTitle[0].textContent = gameBegin[gameBeginValue].question;
/*The information section for playing the game*/
var gameInformation = $('p');
gameInformation[0].textContent = gameBegin[gameBeginValue].instructions;
/*Changing the values of the input choices based on question.*/
var questionChoice =$('span');
questionChoice[0].textContent = gameBegin[gameBeginValue].choice[0];
questionChoice[1].textContent = gameBegin[gameBeginValue].choice[1];
questionChoice[2].textContent = gameBegin[gameBeginValue].choice[2];
questionChoice[3].textContent = gameBegin[gameBeginValue].choice[3];
/*Changing the value of the submit button based on what screen you are on */
var buttonDescription = $("#submitButton");
buttonDescription[0].value = gameBegin[gameBeginValue].buttonValue;
/*This is what I am using to choose which question is correct based
on what radio button the user selects. */
if (gameBeginValue==1){
question1();
$('#submitButton').prop('disabled', true);
}else if (gameBeginValue==2){
question2();
$('#submitButton').prop('disabled', true);
}else if (gameBeginValue==3){
question3();
$('#submitButton').prop('disabled', true);
}else if (gameBeginValue==4){
question4();
$('#submitButton').prop('disabled', true);
}else if (gameBeginValue==5){
question5();
$('#submitButton').prop('disabled', true);
}
/*I want the user to have to enter in a radio button before going to next screen*/
/*I want the gameBeginValue variable to increase everytime this button is clicked
But I want it to Happen Last.*/
$("input[type=radio]").attr('disabled', false);
gameBeginValue++;
/*I want the radio buttons to all be unchecked at the start of the
next question*/
$('#answerChoice0').prop('checked',false);
$('#answerChoice1').prop('checked',false);
$('#answerChoice2').prop('checked',false);
$('#answerChoice3').prop('checked',false);
})
/*Updates the end users score and tells them if they are correct or not*/
/*Question 1*/
function question1(){
$('#answerChoice0').off('click').on('click',function(){
alert('Correct!');
gameScore = gameScore + 1;
gameScoreLabel[0].textContent = "Score: " + gameScore;
$("input[type=radio]").attr('disabled', true);
$('#submitButton').prop('disabled', false);
})
$('#answerChoice1').off('click').on('click',function(){
alert('Wrong!');
$("input[type=radio]").attr('disabled', true);
$('#submitButton').prop('disabled', false);
})
$('#answerChoice2').off('click').on('click',function(){
alert('Wrong!');
$("input[type=radio]").attr('disabled', true);
$('#submitButton').prop('disabled', false);
})
$('#answerChoice3').off('click').on('click',function(){
alert('Wrong!');
$("input[type=radio]").attr('disabled', true);
$('#submitButton').prop('disabled', false);
})
}
/*Various functions are called based on which question
the user is on*/
/*Question 2*/
function question2(){
$('#answerChoice0').off('click').on('click',function(){
alert('Wrong!');
$("input[type=radio]").attr('disabled', true);
$('#submitButton').prop('disabled', false);
})
$('#answerChoice1').off('click').on('click',function(){
alert('Wrong!');
$("input[type=radio]").attr('disabled', true);
$('#submitButton').prop('disabled', false);
})
$('#answerChoice2').off('click').on('click',function(){
alert('Wrong!');
$("input[type=radio]").attr('disabled', true);
$('#submitButton').prop('disabled', false);
})
$('#answerChoice3').off('click').on('click',function(){
alert('Correct!');
gameScore = gameScore + 1;
gameScoreLabel[0].textContent = "Score: " + gameScore;
$("input[type=radio]").attr('disabled', true);
$('#submitButton').prop('disabled', false);
})
}
/*Question 3*/
function question3(){
$('#answerChoice0').off('click').on('click',function(){
alert('Wrong!');
$("input[type=radio]").attr('disabled', true);
$('#submitButton').prop('disabled', false);
})
$('#answerChoice1').off('click').on('click',function(){
alert('Wrong!');
$("input[type=radio]").attr('disabled', true);
$('#submitButton').prop('disabled', false);
})
$('#answerChoice2').off('click').on('click',function(){
alert('Correct!');
gameScore = gameScore + 1;
gameScoreLabel[0].textContent = "Score: " + gameScore;
$("input[type=radio]").attr('disabled', true);
$('#submitButton').prop('disabled', false);
})
$('#answerChoice3').off('click').on('click',function(){
alert('Wrong!');
$("input[type=radio]").attr('disabled', true);
$('#submitButton').prop('disabled', false);
})
}
/*Question 4*/
function question4(){
$('#answerChoice0').off('click').on('click',function(){
alert('Correct!');
gameScore = gameScore + 1;
gameScoreLabel[0].textContent = "Score: " + gameScore;
$("input[type=radio]").attr('disabled', true);
$('#submitButton').prop('disabled', false);
})
$('#answerChoice1').off('click').on('click',function(){
alert('Wrong!');
$("input[type=radio]").attr('disabled', true);
$('#submitButton').prop('disabled', false);
})
$('#answerChoice2').off('click').on('click',function(){
alert('Wrong!');
$("input[type=radio]").attr('disabled', true);
$('#submitButton').prop('disabled', false);
})
$('#answerChoice3').off('click').on('click',function(){
alert('Wrong!');
$("input[type=radio]").attr('disabled', true);
$('#submitButton').prop('disabled', false);
})
}
/*Question 5*/
function question5(){
$('#answerChoice0').off('click').on('click',function(){
alert('Wrong!');
$("input[type=radio]").attr('disabled', true);
$('#submitButton').prop('disabled', false);
})
$('#answerChoice1').off('click').on('click',function(){
alert('Correct!');
gameScore = gameScore + 1;
gameScoreLabel[0].textContent = "Score: " + gameScore;
$("input[type=radio]").attr('disabled', true);
$('#submitButton').prop('disabled', false);
})
$('#answerChoice2').off('click').on('click',function(){
alert('Wrong!');
$("input[type=radio]").attr('disabled', true);
$('#submitButton').prop('disabled', false);
})
$('#answerChoice3').off('click').on('click',function(){
alert('Wrong!');
$("input[type=radio]").attr('disabled', true);
$('#submitButton').prop('disabled', false);
})
}
})