Multiple checkbox value validation for a single time at jQuery

I was going to implement a quiz project with jQuery, HTML, and CSS. Within 30 questions, there were only two questions where needed to use the checkbox feature. My professor set a goal to show a message after hitting the answer. It will be correct/incorrect.

Quickly I have completed all without those two questions. If you can calculate the whole time, it will be only 20% for all questions, but I spent 80% of the time on those two questions. After the end of the day, I made a solution. I searched many at Google, but I could not find any exact solution. That is why today, I am going to write this blog.

Correct Solution

Incorrect Solution

I tried by variable, array with loop checking, and other multiple attempts.

Problems I faced:

1. For variables, if I take multiple variables, it stores value once after completing one iteration.
2. For loop, it can’t iterate value properly.
3. And array append, it just initiates every time.

Solution what I did:

I got two hints from geeksforgeeks.org/how-to-get-all-selected-checkboxes-in-an-array-using-jquery/ and https://api.jquery.com/jquery.each/ then I just rewrite my code.

Let’s see my jQuery code sample:

$(‘.question37’).change(function() {
 //question37 is just css id.
 var values = []; // declared an empty array
{
 $(‘.question37 :checked’).each(function() {
//just checking id has checked or not then passing through a jQuery.each( array, callback) function.
 values.push($(this).val());
//Pushing value within array
 });
 }
 
 //console.log(values);
//Here I am checking answer with array length.
if (values.includes(‘2’) && values.includes(‘4’) && values.length == 2) {
 $(“div.desc”).hide();
//just hide wrong answer notification
 setTimeout(function(){ $(“#AnswersQ372”).show()}, 100);
//showing right answer notification
 //console.log(“true”);
 }
 else{
 $(“div.desc”).hide();
 setTimeout(function(){ $(“#AnswersQ371”).show()}, 100);
 //console.log(“false”);
 }
});

Now you can give a look for my html code sample:

<div class="row justify-content-center">
     <div class="col-sm-8 col-sm-offset-2">
          <div style="font-size: 16px;">
            <h4>Q37) What is greater than 4?</h4>
            <div class="question37">
                <input class="answersQ371" type="checkbox" name="answersQ37" value="1"/> A. 1<br/>
                <input class="answersQ372" type="checkbox" name="answersQ37" value="2"/> B. 5<br/>
                <input class="answersQ373" type="checkbox" name="answersQ37" value="3"/> C. 3<br/>
                <input class="answersQ374" type="checkbox" name="answersQ37" value="4"/> D. 6<br/>
            </div>
            <br>
<div id="AnswersQ371" class="desc" style="display: none;">
              <button type="button" class="btn btn-primary btn-lg btn-block incorrect">It is incorrect.</button>
            </div>
            <div id="AnswersQ372" class="desc" style="display: none;">
              <button type="button" class="btn btn-primary btn-lg btn-block correct">It is correct.</button>
            </div>
            <div id="AnswersQ373" class="desc" style="display: none;">
              <button type="button" class="btn btn-primary btn-lg btn-block incorrect">It is incorrect.</button>
            </div>
            <div id="AnswersQ374" class="desc" style="display: none;">
              <button type="button" class="btn btn-primary btn-lg btn-block correct">It is correct.</button>
            </div>
          </div>
        </div>
      </div>

That’s it. Problems are solved by me!

Writer:
S M Sarwar Nobin
MS Student (Computer Science) and Graduate Research Assistant,
University of Texas Rio Grande Valley, Texas, USA