Click toggle with jQuery

Question

I've used a hover function where you do x on mouseover and y and mouseout. I'm trying the same for click but it doesn't seem to work:

$('.offer').click(function(){ 
  $(this).find(':checkbox').attr('checked', true ); 
},function(){
  $(this).find(':checkbox').attr('checked', false ); 
});

I want the checkbox to be checked when clicking on a div, and unchecked if clicked again - a click toggle.

Here is tutorial on [How to create JQuery plugin to convert radio buttons into toggle buttons](http://sgeek.org/jquery-toggle-button-plugin-for-sliding-toggle-switches-sswitch/) and [Here you can see demo](http://www.demos.sgeek.org/sswitch-jquery-plugin-demo/). Hopefully it may help you or other users — Gopal Joshi, Feb 13 '17 at 05:16

karim79 · Accepted Answer · 2013-07-25T20:39:41.853

214

This is easily done by flipping the current 'checked' state of the checkbox upon each click. Examples:

 $(".offer").on("click", function () { 
       var $checkbox = $(this).find(':checkbox');
       $checkbox.attr('checked', !$checkbox.attr('checked'));
 });

or:

 $(".offer").on("click", function () { 
       var $checkbox = $(this).find(':checkbox');
       $checkbox.attr('checked', !$checkbox.is(':checked'));
 });

or, by directly manipulating the DOM 'checked' property (i.e. not using attr() to fetch the current state of the clicked checkbox):

 $(".offer").on("click", function () { 
       var $checkbox = $(this).find(':checkbox');
       $checkbox.attr('checked', !$checkbox[0].checked);
 });

...and so on.

Note: since jQuery 1.6, checkboxes should be set using prop not attr:

 $(".offer").on("click", function () { 
       var $checkbox = $(this).find(':checkbox');
       $checkbox.prop('checked', !$checkbox[0].checked);
 });

edited Jul 25 '13 at 20:39

answered Sep 23 '09 at 16:46

karim79

339,989
67
413
406

I wouldn't recommend setting an element's DOM attribute to a boolean value. Presumably it gets cast to the string `'1'` in the process. – Alex Barrett Sep 23 '09 at 17:23
2

@Alex Barrett - shouldn't matter, jQuery sweeps such details under the rug. I believe it's common practice to set boolean attributes like *selected*, *disabled* and *checked* to a boolean value using attr(). Furthermore, their internal representation is boolean, alert($foo.attr('checked')) will return true or false whether or not a string or a boolean has been used to set it. – karim79 Sep 23 '09 at 17:45
8

I've encountered cases where you actually need to remove the "checked" attribute completely in order for the box to be unchecked. In those circumstances, none of these will work. – Jeremy Holovacs Aug 22 '11 at 12:36
@Jeremy - can you provide a working example? Sounds like a bizarre edge case. – karim79 Aug 22 '11 at 14:15
As I recall, it was an edge case, and very frustrating to track down. Unfortunately I don't remember the details, and I no longer work in the environment I discovered it. I just thought I'd mention it in case someone else ran across the issue while implementing your answer. – Jeremy Holovacs Aug 22 '11 at 15:18
1

Why invert the attribute in such a complex way, when you can just click on each checkbox: `... $(this).find(':checkbox').click(); ...` – vladko13 Dec 09 '15 at 17:36

score 27 · Answer 2 · answered Nov 13 '10 at 06:24

27

Another approach would be to extended jquery like this:

$.fn.toggleCheckbox = function() {
    this.attr('checked', !this.attr('checked'));
}

Then call:

$('.offer').find(':checkbox').toggleCheckbox();

answered Nov 13 '10 at 06:24

Justin Tanner

14,062
17
82
103

2

I like that, as it works for trainloads of checkboxes, too. +1 – Tino Feb 25 '11 at 16:42
You should add `this.trigger('change');` otherwise the onChange Event wont be triggered. – Frozen_byte Jul 20 '15 at 01:16

Tim Santeford · Answer 3 · 2011-07-29T20:59:16.227

Warning: using attr() or prop() to change the state of a checkbox does not fire the change event in most browsers I've tested with. The checked state will change but no event bubbling. You must trigger the change event manually after setting the checked attribute. I had some other event handlers monitoring the state of checkboxes and they would work fine with direct user clicks. However, setting the checked state programmatically fails to consistently trigger the change event.

jQuery 1.6

$('.offer').bind('click', function(){ 
    var $checkbox = $(this).find(':checkbox');
    $checkbox[0].checked = !$checkbox[0].checked;
    $checkbox.trigger('change'); //<- Works in IE6 - IE9, Chrome, Firefox
});

you could also trigger the click event directly. – davenpcj Feb 23 '12 at 15:48 — davenpcj, Feb 23 '12 at 15:48

score 7 · Answer 4 · answered Sep 23 '09 at 16:46

7

You could use the toggle function:

$('.offer').toggle(function() {
    $(this).find(':checkbox').attr('checked', true);
}, function() {
    $(this).find(':checkbox').attr('checked', false);
});

answered Sep 23 '09 at 16:46

dcharles

4,822
2
32
29

This has been deprecated. – Mani Sep 19 '13 at 20:25

score 2 · Answer 5 · edited Jan 31 '11 at 13:40

2

Why not in one line?

$('.offer').click(function(){
    $(this).find(':checkbox').attr('checked', !$(this).find(':checkbox').attr('checked'));
});

edited Jan 31 '11 at 13:40

Drew Noakes

300,895
165
679
742

answered Nov 02 '10 at 16:57

Thomas Seres

21
4

score 1 · Answer 6 · answered Mar 08 '14 at 16:33

1

jQuery: Best Way, delegate the actions to jQuery (jQuery = jQuery).

$( "input[type='checkbox']" ).prop( "checked", function( i, val ) {
    return !val;
});

answered Mar 08 '14 at 16:33

miosser

135
1
7

score 1 · Answer 7 · edited Nov 08 '11 at 23:09

1

I have a single checkbox named chkDueDate and an HTML object with a click event as follows:

$('#chkDueDate').attr('checked', !$('#chkDueDate').is(':checked'));

Clicking the HTML object (in this case a <span>) toggles the checked property of the checkbox.

edited Nov 08 '11 at 23:09

sth

222,467
53
283
367

answered Nov 08 '11 at 20:58

Ross Mehlman

11
1

score 0 · Answer 8 · answered Apr 04 '12 at 04:49

0

Easiest solution

$('.offer').click(function(){
    var cc = $(this).attr('checked') == undefined  ? false : true;
    $(this).find(':checkbox').attr('checked',cc);
});

answered Apr 04 '12 at 04:49

keithics

8,576
2
48
35

Close. It will be 'undefined' on the first click, assigning the value 'false'. Then it will be defined on the second click, assigning the value 'true'. On a third click, it will still be defined, so it will still be assigned 'true'. – Kevin C. Oct 18 '12 at 00:13

score 0 · Answer 9 · answered Jan 26 '13 at 16:04

Another alternative solution to toggle checkbox value:

<div id="parent">
    <img src="" class="avatar" />
    <input type="checkbox" name="" />
</div>


$("img.avatar").click(function(){

    var op = !$(this).parent().find(':checkbox').attr('checked');
    $(this).parent().find(':checkbox').attr('checked', op);

});

score 0 · Answer 10 · answered Sep 23 '09 at 16:44

0

try changing this:

$(this).find(':checkbox').attr('checked', true );

to this:

$(this).find(':checkbox').attr('checked', 'checked');

Not 100% sure if that will do it, but I seem to recall having a similar problem. Good luck!

answered Sep 23 '09 at 16:44

brettkelly

27,655
8
56
72

score 0 · Answer 11 · answered Sep 23 '09 at 16:46

0

$('.offer').click(function(){ 
    if ($(this).find(':checkbox').is(':checked'))
    {
        $(this).find(':checkbox').attr('checked', false); 
    }else{
        $(this).find(':checkbox').attr('checked', true); 
    }
});

answered Sep 23 '09 at 16:46

lod3n

2,893
15
16

score 0 · Answer 12 · answered Sep 23 '09 at 16:47

0

In JQuery I don't think that click() accepts two functions for toggling. You should use the toggle() function for that: http://docs.jquery.com/Events/toggle

answered Sep 23 '09 at 16:47

Kai

9,444
6
46
61

score 0 · Answer 13 · answered Sep 23 '09 at 17:25

0

$('.offer').click(function() { 
    $(':checkbox', this).each(function() {
        this.checked = !this.checked;
    });
});

answered Sep 23 '09 at 17:25

Alex Barrett

16,175
3
52
51

score 0 · Answer 14 · answered Jul 16 '13 at 02:58

0

    $('controlCheckBox').click(function(){
    var temp = $(this).prop('checked');
    $('controlledCheckBoxes').prop('checked', temp);
});

answered Jul 16 '13 at 02:58

mahmoh

802
1
9
15

score 0 · Answer 15 · edited Jul 25 '12 at 15:06

0

<label>
    <input
        type="checkbox"
        onclick="$('input[type=checkbox]').attr('checked', $(this).is(':checked'));"
    />
    Check all
</label>

edited Jul 25 '12 at 15:06

mellamokb

56,094
12
110
136

answered Feb 23 '12 at 22:08

dobs

2,742
2
21
19

Click toggle with jQuery

15 Answers15

Linked

Related