jQuery: check if checkboxes are checked

Question

I want to highlight any unchecked checkboxes when a form is submitted. I've got a total of six checkboxes in .new_order, and I've started writing the function but I'm a bit stuck how to add a highlight class to each unchecked checkbox in .new_order.

$('#orderconfirm').click(function () {
    if ($('.modal .modal-body .new_order :checkbox').is(':unchecked') {
        $(this).addClass('highlight');
    }
});

Will this code iterate through each checkbox? I feel like I'm missing something. Also, this code has to disable the button until each checkbox is checked. Any help would be great!

http://stackoverflow.com/questions/2204250/check-if-checkbox-is-checked-with-jquery — dsgriffin, Mar 26 '13 at 23:52

Daniel Imms · Accepted Answer · 2013-03-26T23:58:02.073

2

Try using :not(:checked) at the end of your selector, call .addClass() on this to add the class to all objects returned.

Demo

$('#orderconfirm').click(function () {
    $('.modal .modal-body .new_order input:checkbox:not(:checked)')
        .addClass('highlight');
});

edited Mar 26 '13 at 23:58

answered Mar 26 '13 at 23:52

Daniel Imms

47,944
19
150
166

dsgriffin · Answer 2 · 2013-03-27T00:10:01.053

2

Here is a working jsFiddle of the following method.

You could use jQuery's each() to iterate through your class, and add your CSS class to whichever elements meet your criteria:

$('#orderconfirm').click(function () {
  $('.new_order').each(function(){
     if($(this).prop('checked') === false) {
        $(this).addClass('highlight');
     }
  });
});

edited Mar 27 '13 at 00:10

answered Mar 26 '13 at 23:58

dsgriffin

66,495
17
137
137

jQuery: check if checkboxes are checked

2 Answers2