Check / Uncheck Input Boxes with Jquery

Question

I've been looking through posts trying to find the answer, but haven't had any luck, so hoping someone can point me in the right direction.

When I use the following code, it checks all the input boxes and it unchecks them. However, if I click the check all again, it doesn't check them all. Why is that?

JQuery

  $('document').ready( function() {
    $('.check_boxes').click( function() {
      if ( $(':checkbox').attr('checked')) {
        $(':checkbox').attr('checked', false);
      } else {
        $(':checkbox').attr('checked', true);
      }     
    });
});

HTML

<input type="checkbox" class="check_boxes" id="check_all" />

Ok here is your demo http://jsfiddle.net/vhLMN/14/ what do you want here? — Carlos Morales, Jul 02 '14 at 21:26

Alex Char · Accepted Answer · 2014-07-02T22:22:44.063

2

Try this:

js

  $('document').ready( function() {
    $('.check_boxes').click( function() {
      if ( $('input:checkbox').prop('checked')) {
        $('input:checkbox').prop('checked', true);
      } else {
        $('input:checkbox').prop('checked', false);
      }     
    });
});

fiddle

edited Jul 02 '14 at 22:22

answered Jul 02 '14 at 21:42

Alex Char

32,879
9
49
70

Thank you. If one of the inputs is checked the check all input still stays checked :/ – JustLearninThisStuff Jul 02 '14 at 21:47
I thought you want a checkbox to check/uncheck all. Correct me if i'm wrong. – Alex Char Jul 02 '14 at 21:54
Yes that's true...just thought it would uncheck if one of the inputs were unchecked. I'm still learning js. – JustLearninThisStuff Jul 02 '14 at 22:25

DolDurma · Answer 2 · 2014-07-03T16:47:55.437

0

i think you need this simple code:

$('document').ready( function() {
$('.check_boxes').click( function() {
  if ( $(':checkbox').prop('checked')) {
    $(':checkbox').prop('checked', true);
  } else {
    $(':checkbox').prop('checked', false);
  }     
 });
});

edited Jul 03 '14 at 16:47

answered Jul 02 '14 at 21:27

DolDurma

15,753
51
198
377

Here is the demo http://jsfiddle.net/vhLMN/17/ – Carlos Morales Jul 02 '14 at 21:28
Awesome, thank you! I wasn't too far off :) I tried using .prop() before and it didn't work the way I had the code. Now, how would I automatically uncheck the check all input if one of the inputs is unchecked? – JustLearninThisStuff Jul 02 '14 at 21:33
Line 3 needs to be .prop too, correct? Otherwise my code doesn't work. – JustLearninThisStuff Jul 02 '14 at 21:34
That does not work. See http://jsfiddle.net/vhLMN/21/ – Nux Jul 02 '14 at 21:40
Neither of those work, see http://jsfiddle.net/vhLMN/23/ – JustLearninThisStuff Jul 02 '14 at 21:45

Nux · Answer 3 · 2014-07-02T21:38:46.450

Actually once you click on the checkbox, the first if is always true. Hence all checkeboxes get unchecked (including the one you clicked).

I assume you wanted this behavior: http://jsfiddle.net/vhLMN/18/

$('document').ready( function() {
    $('.check_boxes').click( function() {
      if ( !this.checked ) {
        $('.flip_us :checkbox').attr('checked', false);
      } else {
        $('.flip_us :checkbox').attr('checked', true);
      };     
    });
});

BTW. There is no label attribute on inputs. You should fix this unless you are using some framework that uses it to create actual label tag.

nice catch, that should be `id=` thanks! – JustLearninThisStuff Jul 02 '14 at 21:40 — JustLearninThisStuff, Jul 02 '14 at 21:40

Check / Uncheck Input Boxes with Jquery

3 Answers3