jquery - 使用 jQuery 要求选择单选按钮-6ren

jquery - 使用 jQuery 要求选择单选按钮

转载作者：行者123 更新时间：2023-12-01 04:03:55

有没有办法使用 jQuery 来选择数组的某些值所需的单选按钮？有人可以帮助我或为我指明正确的方向吗？ :)

情况:我正在构建一个游戏，其中问题根据数组更改值。有 4 个单选按钮，如果数组介于值 1 和 5 之间(例如)，但不选择任何其他值，我希望最终用户选择其中之一。

编辑第 1 部分:我仅想要使用 jQuery 来选择所需的单选按钮，因为单选按钮实际上出现在整个页面中，而不管数组值如何，但我会隐藏它们，除非数组的值为 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);

    })
}


})

最佳答案

我猜您想要 jQuery 验证插件。 http://jqueryvalidation.org/required-method/看看该页面上的示例，我想您会找到您正在寻找的内容，特别是标记为“仅当年龄低于 13 岁时才需要‘ parent ’”的示例。

关于jquery - 使用 jQuery 要求选择单选按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33716051/

文章推荐： jquery - 需要双击的自定义属性(featherlight lightbox)

文章推荐： jQuery 文件路径参数

javascript - 表格计算JS(单选)
HTML 部分，只是我代码的一部分: HP: SP: EA: ED: PA: PD:
Javascript 单选/复选框问题
我有这个简单的脚本。我正在尝试获取选中的值并将它们添加到禁用输入框中的运行总计中。我知道它正在被选中，但它没有更新到输入框，我不确定为什么。谁能帮帮我？ function updateF
css - 单选/复选框自定义背景和垂直对齐
我在使用自定义背景的单选按钮/复选框时遇到了问题。我在这里设计了它们的样式:Quick Tip: Easy CSS3 Checkboxes and Radio Buttons .主要部分是input在
jQueryUI 单选/复选按钮未以编程方式更改
我可以预见地读取 jQueryUI 单选按钮的值，但是，我无法以编程方式设置它。无论我使用哪种方法更改单选按钮的值，jQueryUI 界面都不会更新其界面。 Yes No
vue循环中点击选中再点击取消(单选)的实现
没有展开时点击展开之后 <div class="flashread_item_box_time"> <span class="
javascript - 选择选项之一(单选)时禁用某些输入元素
这里是 JQuery 新手。我有一个大约有 16 个字段的搜索表单，其中大部分是文本框。其余的都是下拉菜单。我在这些字段下方有 3 个单选按钮。当选择第一个时，表单中的某些字段应被禁用。当选择第二个
sapui5 - UI5 VizFrame 单选
我目前正在构建一个 Fiori 应用程序用于查看事件(票证)。我必须创建一个饼图，其中包含票证的所有不同状态。当我单击图表的一部分时，它会将我带到包含该状态的所有票证的列表。我可以选择饼图的多个状态，
ios - UITableView:在顶部添加单元格时保持选择(单选)？
此代码将在使用 reloadData 刷新 UITableView 后恢复单元格选择: NSIndexPath *selectedIndexPath = [self.tableView indexPa
ios - 单选 UITableView 叠加单元格
我正在尝试对 UITableView 单元格进行自定义选择。为此，我在我的单元格上方创建了 UIView，它现在在触摸时出现/消失。但问题是当我按下单元格选择时出现。如果那时我选择任何其他行，它也会被
javascript - 我如何抓取复选框/单选/文本输入的页面并检测其原始值的变化？
我所有的复选框、单选框和文本输入都在 ID 的末尾附加了“_boom”。我想抓取这些 id 的页面，检测更改以查看其中是否有任何一个与其原始状态不同，如果是，则将 CSS 应用于页面上名为“保存”的按
html - 有没有办法将多选列表框显示为组合框(单选)但在打开时应该给出多选
我正在寻找一种方法，使多选列表框应显示为普通的单选组合框，但在单击时它应作为允许多选的列表框，如下所示，如电子表格中所示。我正在寻找 CSS HTML 和 javascript 而非 Jquery 中
html - 单选 HTML 列表框高度
我有一个 HTML 我想显示为“列表框”(一个同时显示多个元素的框，而不是下拉框)。但是，我只想允许选择一个元素。我还想将盒子的高度(通过 CSS)设置为其容器大小的 100%。这三件事似乎是相互排
javascript - jquery-在填写复选框/单选/下拉表单后计算总值
我有一个包含三个部分的付款表格。基本上，第一个是带有乘数的“单选”列表，第二个是带有设置值的“复选框”列表，第三个是带有乘数的下拉列表 ==> (jsfiddle) .为清楚起见，我插入了一个文本框来
javascript - 隐藏单选按钮并仅以 django 形式显示标签(单选)
我想删除单选按钮，只显示是或否标签。为此，我隐藏了 radio 输入并使用 css3 选择器 (:checked + label) 根据选择更改背景颜色。但由于某种原因，这不起作用。 HTML(来自
javascript - jquery ui 多选不适用于多选+单选
我正在使用这个插件http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/#single对于多选，并且希望也可以在同一
javascript - 单击“单选”时动态显示 DIV
我收到了这段代码，但我似乎无法正常工作，我查看了之前的问题，但找不到任何与之完全相同的代码。也许这完全是错误的，应该重新开始？我想要做的是在选择单选按钮时显示一个 div。这是我的代码: jQue
html - 如何去除移动设备上输入(单选、选择和复选框)的蓝色背景？
我试图在用户点击输入(单选、复选框或选择)时移除焦点背景，但它不起作用。这些是我放在元素上的样式: .form-holder input[type="radio"]:focus, .form-
javascript - Bootstrap 4 单选/复选框按钮显示单选和复选框
我正在使用 Bootstrap 4 并想使用单选按钮和复选框按钮组，但按钮显示的是实际的单选按钮和复选框 UI 元素，如下所示: 上面的例子直接摘自文档。我试过删除并重新安装 Bootstrap 4，
ios - 在uicollectionview(单选)中设置对所选单元格的影响ios swift
我正在使用 Collection View 进行水平滚动。它工作得很好。现在我想为选择任何单元格设置任何效果。所以，我写了这段代码” func collectionView(collectionVi
twitter-bootstrap - 多行中的 Bootstrap (单选)按钮组
我有一个按钮组，其中包含必须充当单选按钮的几个项目。我还需要将它们分成几行并跨越容器的整个宽度。为此，我使用了 Bootstrap 的类 btn-group-justified ，然后我拆分元素分

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

jquery - 使用 jQuery 要求选择单选按钮