CODEWITHSUNDEEP
javascriptjquery
Mitch
Mitch

Reputation: 17

Jquery show/hide div if certain checkboxes are checked

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>

Upvotes: 1

Views: 313

Answers (3)

416E64726577
416E64726577

Reputation: 2214

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

Upvotes: 1

adeneo
adeneo

Reputation: 318362

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

Upvotes: 2

dansch
dansch

Reputation: 6267

// 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..

Upvotes: 0

Related Questions