Jquery show/hide div if certain checkboxes are checked

Question

I have a list of 6 questions, 3 are right (lets say id:a, id:c and id:f) and 3 are wrong. the maximum nbr of checkboxes that can be clicked is 3. If the right 3 boxes are checked show div id"correct", if there is a wrong box checked show div id"incorrect". Those div's have are hidden in css (display: none;)

this is my html:

<ul>
<li><input type="checkbox" id="a" /><label>question1</label></li>
<li><input type="checkbox" id="b" /><label>question2</label></li>
<li><input type="checkbox" id="c" /><label>question3</label></li>
<li><input type="checkbox" id="d" /><label>question4</label></li>
<li><input type="checkbox" id="e" /><label>question5</label></li>
<li><input type="checkbox" id="f" /><label>question6</label></li>
</uL>

<input type="submit" value="check result" />

<div id="correct"><p>very good</p></div>
<div id="incorrect"><p>sorry you have made a mistake</p></div>

where is the relation to "correct" or "incorrect" between the checkboxes? — Adrian Preuss
– Adrian Preuss, Commented Mar 14, 2014 at 20:56

adeneo · Accepted Answer · 2014-03-14 21:14:57Z

2

Something like this

$('input[type="submit"]').on('click', function() {
    var correct = ['a', 'c', 'f'],
        valid   = correct.filter(function(id) {
            return $('#'+id).is(':checked'); 
        }).length === correct.length && 
        $('input[type="checkbox"]:checked').length === correct.length;

    $('#correct').toggle(valid);
    $('#incorrect').toggle(!valid);
});

FIDDLE

edited Mar 14, 2014 at 21:14

answered Mar 14, 2014 at 21:03

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

416E64726577 Over a year ago

This lets you check more than 3 checkboxes, though.

416E64726577 · Accepted Answer · 2014-03-14 21:35:46Z

Part 1. Make sure the user does not check more than three checkboxes at any given moment.

$("#questions").on('click',function(){
    if ($('input[type="checkbox"]:checked').length > 3) {
        return false;
    }
});

Part 2. Check how many checkboxes are correct. If 3, display the "very good" div, else, display the "sorry you have made a mistake" div.

var correct=0;

$(".checker").on('click',function(){
    $("input:checkbox").each(function(){
        var $this = $(this);    
        if($this.is(":checked")){
            //alert($this.attr("id"));
            if ($this.attr("id") == "a") {
                correct++;
            } else if ($this.attr("id") == "c") {
                correct++;
            } else if ($this.attr("id") == "f") {
                correct++;
            }
        }
    });
    if (correct == 3) {
        document.getElementById('correct').style.display = 'block';
    } else {
        document.getElementById('incorrect').style.display = 'block';
    }
});

Example.
JSFIDDLE

dansch · Accepted Answer · 2014-03-14 21:04:57Z

0

// assume its correct ( this won't be drawn to page if we call errorOut )
$('#correct').show();
$('#incorrect').hide();

function errorOut() {
  $('#correct').hide();
  $('#incorrect').show();
}

if ( $('ul [type=checkbox]:checked').length > 3 )
  errorOut();
else
  $(['a', 'c', 'f']).each(function(n, letter) {
    // if each of these aren't checked, it's wrong
    if ( !$('ul [type=checkbox].' + letter).is(':checked') )
      errorOut();
  })

You should know how to do this yourself..

answered Mar 14, 2014 at 21:04

dansch

6,2674 gold badges49 silver badges61 bronze badges

Collectives™ on Stack Overflow

Jquery show/hide div if certain checkboxes are checked

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related