Crag
Crag

Reputation: 107

jQuery Ajax - if multiple Checkboxes are checked

I am searching for a script that makes a action when a few checkboxes are clicked. I found the following script that works great for only one checkbox:

<input type="checkbox" name="foo" value="bar" class="checkIt"/>Name <br/>

<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script type="text/javascript">
    $('.checkIt').bind('click', function() {
        if($(this).is(":checked")) {
          alert('Everything checked')
        } else {
            alert('I think you have missed some boxes!');
        }
    });
</script>

But now I want more checkboxes and I have no idear how to managing that. So When 10 checkboxes are clicked there are happening something! Would be great if you can help me. My other questions is, that I want istead of a js alert, to show up a image at a specific position if all boxes are checked. is this possible ? THANKS A LOT!!


EDIT: great guys!! ok sorry but the code from the guy before was workig well:

    <input type="checkbox" name="foo" value="bar" class="checkIt"/>Name <br/>
    <input type="checkbox" name="foo" value="bar" class="checkIt"/>Name <br/>
        <input type="checkbox" name="foo" value="bar" class="checkIt"/>Name <br/>
            <input type="checkbox" name="foo" value="bar" class="checkIt"/>Name <br/>

<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script type="text/javascript">
$('.checkIt').bind('click', function() {

    var $boxes = $('.checkIt');
    var boxesLength = $boxes.length;
    var checkedCount = $boxes.filter(':checked').length;
    if( boxesLength == checkedCount) {
       alert("hello");
    }
});


</script>

no I search for a image that appears, instead of the alert!

Upvotes: 1

Views: 2284

Answers (1)

Sibu
Sibu

Reputation: 4617

check my demo here

 $(".checkIt").change(function(){ 
    if ($('.checkIt:checked').length == $('.checkIt').length) {
       $("#imgloc").show();
    } else {
        $("#imgloc").hide();
    }
});​

Updated to hide image when checkboxes are unchecked, Updated Demo

Upvotes: 1

Related Questions