Question

I have a page that needs to have a div to fade out when three checkboxes are checked. I am using the code below but it doesn’t work. Any suggestions why?

<script>
function countChecked() {
var n = $("input:checked").length;
if($("input:checked").length > 3) {

    }
    else
    {
   $(".chkExample")
     .fadeTo(500, 0.2)
    }

}
countChecked();


$(":checkbox").click(countChecked);


</script>

Answer 1

function countChecked() {
    var count = $('input[type="checkbox"]:checked').length;

    // this will test for 3 or more >=
    if (count >= 3) { alert('3 or more checked!'); }
    else { $(".chkExample").fadeTo(500, 0.2) }
}

countChecked();
// assuming you are using at least 1.7.2 of jQuery
// but start using `.on()` and with checkboxes/radios I always use 'change'
$('input[type="checkbox"]').on('change', countChecked);​

On a random side now :checkbox is actually depreciated. Use [type="checkbox"] as it will use native javascript to get them faster anyways.

​

jsFiddle Demo