Home >Web Front-end >JS Tutorial >jquery determines whether the check box is selected and performs special effects for answering questions_jquery

jquery determines whether the check box is selected and performs special effects for answering questions_jquery

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

The example in this article describes the special effect code of jquery to determine whether the check box is selected and prompt the answer. Share it with everyone for your reference. The details are as follows:
The screenshot of the running effect is as follows:

The specific code is as follows:

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("请选择一个选项再提交");
    }else if($("#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 tested.

I hope this article will be helpful to everyone learning jQuery programming.

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：Example analysis of the difference between serializeArray() and serialize() in jQuery_jqueryNext article：Example analysis of the difference between serializeArray() and serialize() in jQuery_jquery

See more

jquery determines whether the check box is selected and performs special effects for answering questions_jquery

Related articles