Home >Web Front-end >JS Tutorial >Based on jQuery to implement whether the check box is selected to answer the question_jquery

Based on jQuery to implement whether the check box is selected to answer the question_jquery

WBOYOriginal: 2016-05-16 15:26:171287browse

Recently, the function points encountered in the project requirements are given corresponding prompts according to the options selected by the user. The renderings of the test program are given below to see if you are very satisfied. If you think it is good, please Continue to view the full article.

1. Principle of implementation:

Step one: Determine which item the user selects, that is, which check box is selected

Step 2: Give corresponding prompts based on the check box selection

2. Let’s look at the main program:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <input type="checkbox" id="checkbox01" />A <br />
    <input type="checkbox" id="checkbox02" />B <br />
    <input type="checkbox" id="checkbox03" />C <br />
    <input type="checkbox" id="checkbox04" />D <br />
    <input type="button" id="button" value="提交" />
    <h4 >提示本题是单选题且正确答案是A</h4>
    <script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/layout.js" type="text/javascript" charset="utf-8"></script>
  </body>
</html>

It can also be seen from the above that I assume that this question is a multiple choice question and the correct answer is A, then I will start to use JQ to implement it~~~

3. jQuery program

$(function(){
//假设正确答案是A
$("#button").click(function(){
if($("input").filter(":checked").length==0){
alert("请选择一个选项再提交");
}elsif($("#checkbox01").filter(":checked").length!=0&&$("#checkbox02").filter(":checked").length==0&&$("#checkbox03").filter(":checked").length==0&&$("#checkbox04").filter(":checked").length==0){
alert("您选择的答案是正确的！")
}else{
alert("您选择的答案是错误的！")
}
})
}

I have seen a lot of programs on the Internet that determine whether a check box is selected. After testing, most of them are useless. It is probably caused by the jquery version update that eliminates many programs. Who knows, and then I used $("#id ").filter(":checked").length==0 It is possible to determine which option is selected and has been tested~~~ If there are any other methods, please suggest them and let me worship them~~~

The above code is based on jQuery to implement relevant information to prompt whether the check box is selected or not. I hope you like it.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：A brief analysis of hierarchical selector examples for getting started with jQuery_jqueryNext article：A brief analysis of hierarchical selector examples for getting started with jQuery_jquery

See more

Based on jQuery to implement whether the check box is selected to answer the question_jquery

Related articles