CODEWITHSUNDEEP
jqueryonclicktoggle
eozzy
eozzy

Reputation: 68650

Click toggle with jQuery

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.

Upvotes: 70

Views: 140871

Answers (15)

miosser
miosser

Reputation: 145

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

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

Upvotes: 1

karim79
karim79

Reputation: 342625

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);
 });

Upvotes: 214

mahmoh
mahmoh

Reputation: 792

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

Upvotes: 0

Saeed
Saeed

Reputation: 51

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);

});

Upvotes: 0

dobs
dobs

Reputation: 2764

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

Upvotes: 0

keithics
keithics

Reputation: 8758

Easiest solution 

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

Upvotes: 0

Ross Mehlman
Ross Mehlman

Reputation: 11

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.

Upvotes: 1

Tim Santeford
Tim Santeford

Reputation: 28111

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
});

Upvotes: 11

Thomas Seres
Thomas Seres

Reputation: 21

Why not in one line?

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

Upvotes: 2

Justin Tanner
Justin Tanner

Reputation: 14352

Another approach would be to extended jquery like this:

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

Then call:

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

Upvotes: 27

Alex Barrett
Alex Barrett

Reputation: 16455

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

Upvotes: 0

Kai
Kai

Reputation: 9552

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

Upvotes: 0

dcharles
dcharles

Reputation: 4852

You could use the toggle function:

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

Upvotes: 7

lod3n
lod3n

Reputation: 2903

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

Upvotes: 0

brettkelly
brettkelly

Reputation: 28205

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!

Upvotes: 0

Related Questions