Technical Blog 03 – Multiple checkbox value validation for a single time at jQuery
Abroad Life Series 05 – একটি Paypal Account খোলার গল্প!!
December 22, 2022
Technical Blog 04 – First-time work experience with VM instances at Google Cloud
December 23, 2022I 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.
I tried by variable, array with loop checking, and other multiple attempts.
Problems I faced:
- For variables, if I take multiple variables, it stores value once after completing one iteration.
- For loop, it can’t iterate value properly.
- 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!
SHARE ARTICLE
