jQuery Ajax - if multiple Checkboxes are checked

Question

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!

Try to remove / add classes onClick like $('element').addClass('active') . Based upon this you can look up how many are checked. With the same method you can show your (hidden?) element, like so: $('hiddenElement').addClass('visible') — Rockbot
– Rockbot, Commented Sep 13, 2012 at 11:01
?? sorry i dont understand what you mean here. Can you give me a example code? sorry i am a totally beginner — Crag
– Crag, Commented Sep 13, 2012 at 11:05

Sibu · Accepted Answer · 2012-09-13 11:34:10Z

1

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

edited Sep 13, 2012 at 11:34

answered Sep 13, 2012 at 11:21

Sibu

4,6272 gold badges30 silver badges38 bronze badges

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

Collectives™ on Stack Overflow

jQuery Ajax - if multiple Checkboxes are checked

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related