How to check in jQuery if the checkbox is checked and change the state to the opposit after the "click()" function?

Question

I have this code an I need to set the condition to check if my checkbox is checked or not.

HTML:

   <div id="checkbox_group">
     <input type="checkbox" value="21" name="">21
     <input type="checkbox" value="16" name="">16
     <input type="checkbox" value="20" name="">20
   </div>

jQuery:

$('#checkbox_group input[type=checkbox]').click(function() { 
    if (/* Condition to check if checkbox is checked */)) {
        // if is checked then after click change to false like: checked="false"
    }
    else {
        // if is NOT checked then change it like checked="true"
    }
});

What's the point of this? That's how checkboxes work by default (without any JavaScript). — Felix Kling, Jul 16 '13 at 14:46
I was expecting it too, but I am using Wordpress and it's not working like it should for some reason. It's within a plugin, so I need to find a workaround. It's similar to the WP problem with wrong date() php function you need to use the date_i18n() function instead when you want the correct WP date/time. — Danteonline, Jul 16 '13 at 14:49
Maybe there is an element overlaying your form elements and hence the click doesn't get to them? The `data` seems to be about some PHP best practice and not related to how basic HTML elements work. I doubt that Wordpress does something to disable form elements. — Felix Kling, Jul 16 '13 at 14:52

Adil · Answer 1 · 2013-07-16T14:59:26.743

2

Use checked property.

Live Demo

$('#checkbox_group input[type=checkbox]').click(function() {    
    if (this.checked) {
        $(this).siblings('input[type=checkbox]').prop('checked', false);
    }
    else {
        // if is NOT checked then check it liek checked="true"
        $(this).siblings('input[type=checkbox]').prop('checked', true);
    }
});

You can omit the selector in siblings if you only have checkboxes as siblings that need to participte.

Live Demo

$('#checkbox_group input[type=checkbox]').click(function() {    
    if (this.checked) 
        $(this).siblings().prop('checked', false);  
    else        
        $(this).siblings().prop('checked', true);    
});

edited Jul 16 '13 at 14:59

answered Jul 16 '13 at 14:46

Adil

146,340
25
209
204

Thanks, but it doesn't add the `checked="true"` to the html like the `this.setAttribute('checked',this.checked);` does. And it select only one from many. I need to be able select multiple checkboxes. Any idea how to do that? – Danteonline Jul 16 '13 at 15:02
@Danteonline: The HTML is never changed when a user interacts with the page. While you can change *attribute* of the element, changing the *property* suffices. – Felix Kling Jul 16 '13 at 15:11
Thanks the jsfiddle is working nie ;). But one thing that is missing is to add checked state to the html like `checked="true"` respectively `checked="false"`. Any idea how to do that? – Danteonline Jul 16 '13 at 15:12
@Danteonline: Why would you want to do that? Again, you cannot modify the *HTML source*. – Felix Kling Jul 16 '13 at 15:12
@FelixKling `this.setAttribute('checked',this.checked);` will add `checked="true"` to the code. But how to add `checked="false"` ? I need these things for next things I want to implement in my code that will select only things that have checked="true" etc. – Danteonline Jul 16 '13 at 15:31
@Danteonline: It doesn't really add the attribute to the HTML, that's just how the browser visualizes the DOM. It only adds the the attribute the DOM element's attribute list. `checked` is a so called [*boolean attribute*](http://www.w3.org/TR/REC-html40/intro/sgmltut.html#h-3.3.4.2), i.e. its mere existence indicates that the element is checked. The *value* of the attribute doesn't mean anything. If you later want to select elements that are not checked, use the `:not` selector with the *attributes exists* selector, e.g. `input:not([checked])`. – Felix Kling Jul 16 '13 at 15:34
@Danteonline: However, if you only want to add the attribute because you want to use it to select the elements later on, there are other ways: http://stackoverflow.com/q/590018/218196. Don't make your code more complicated than it has to be. – Felix Kling Jul 16 '13 at 15:38
@FelixKling I think you don't understand me. This code `this.setAttribute('checked',this.checked);` will add text `checked="true"` so the result looks like: `` And I need to know how to revert that so the result looks like in browser like: ``. The question is not if it's good or not, but how to do that ;). Thank for any advice. – Danteonline Jul 16 '13 at 16:52
@Danteonline: As I said, if you add `checked="false"`, it means that the element is selected. Whether the value is `"true"`, `"false"`, `"foo"`, `"42"` or `"asdf"` doesn't matter. Is that really what you want? That seems to be very confusing to me. You cannot add `checked="false"` *and* have the browser think that the element is not selected. – Felix Kling Jul 16 '13 at 20:29

score 1 · Answer 2 · answered Jul 16 '13 at 14:47

1

Try is(':checked')

$('#checkbox_group input[type=checkbox]').click(function() { 
 if ($(this).is(':checked')) {

           //do something
  }else{
           //do something
  }

});

answered Jul 16 '13 at 14:47

Suresh Atta

120,458
37
198
307

1

This is how I would also do it. – enchance Jul 16 '13 at 14:54
Thanks, could you add the code for adding `checked="true"` and `checked="false"`? – Danteonline Jul 16 '13 at 15:04

How to check in jQuery if the checkbox is checked and change the state to the opposit after the "click()" function?

2 Answers2