How to toggle attribute in jQuery

Question

I'm trying to use images as checkboxes. The following would work fine if it were radios instead of checkboxes that I was targeting but with checkboxes the problem is I can't select an element by clicking on it again after selecting it.

// image checkbox
$('#imageCheckBoxes img').click(function() {
    $(this).parent('span').find('input:checkbox').attr('checked', 'checked');
});

<div id="imageCheckBoxes">
    <ul>
        <li><a href="">Africa</a>  <span><img src="images/checkbox-inactive.png" /><input type="checkbox" name="" value="" /></span>
        </li>
        <li><a href="">Asia/Pacific Islands</a>  <span><img src="images/checkbox-inactive.png" /><input type="checkbox" name="" value="" /></span>
        </li>
        <li><a href="">Australia</a>  <span><img src="images/checkbox-inactive.png" /><input type="checkbox" name="" value="" /></span>
        </li>
        <li><a href="">Central/South America</a>  <span><img src="images/checkbox-inactive.png" /><input type="checkbox" name="" value="" /></span>
        </li>
        <li><a href="">Europe/Russia</a>  <span><img src="images/checkbox-inactive.png" /><input type="checkbox" name="" value="" /></span>
        </li>
        <li><a href="">North America</a>  <span><img src="images/checkbox-inactive.png" /><input type="checkbox" name="" value="" /></span>
        </li>
        <li><a href="">United Kingdom</a>  <span><img src="images/checkbox-inactive.png" /><input type="checkbox" name="" value="" /></span>
        </li>
    </ul>
</div>

I need to basically toggle the check attr() part.

How to do that?

Very similar for `disabled`: http://stackoverflow.com/questions/4702000/toggle-input-disabled-attribute-using-jquery — Ciro Santilli新疆棉花TRUMP BAN BAD, Jul 05 '14 at 14:50

score 59 · Accepted Answer · edited Jul 05 '14 at 14:46

59

I'd do this by passing a function to prop (since jQuery 1.6, attr before). The return value of this is set as the new property value.

$(this)
    .closest('li')
        .find('input:checkbox').prop('checked', function(idx, oldProp) {
            return !oldProp;
        });

The key fact here is that you can pass true or false to prop to set the checked property. oldProp is the existing value of the property (which will be either true or false), so !oldProp is the inversion: checked elements are unchecked and vice versa.

Note that I have also changed your code to look for the closest ancestor li element with closest, which should be more reliable and effective.

edited Jul 05 '14 at 14:46

Ciro Santilli新疆棉花TRUMP BAN BAD

256,395
72
959
767

answered Jul 07 '11 at 21:42

lonesomeday

215,182
48
300
305

hmm not working. Using your code I can still select the checkboxes like before but when I click a second time the checked boxes don't get unchecked. – TJ Desantes Jul 07 '11 at 21:50
Ahh ok, reason why it wasn't working earlier was because I swapped the checkbox image in a part of the code I ommited here so when $(this) was being clicked again it was no longer the same image. Thanks working now. – TJ Desantes Jul 07 '11 at 22:00
If the structure is always like this, `$(this).next()` will work too. – Felix Kling Jul 07 '11 at 22:01
I ended up using jquery's `toggleClass()` for my purposes. However, I too liked your solution. – Ziggy Apr 28 '13 at 06:32
+1. AH! A callback function for 'prop' second parameter is SO neat! Brilliant answer. I've refactored my if-else right away :) – radbyx Apr 26 '16 at 06:27

SEoF · Answer 2 · 2013-01-25T11:55:49.613

You could add a rather basic jQuery extension, that works in the same way as "toggle()" and "toggle(showOrHide)" but for attributes - "toggleAttr(attribute)" and "toggleAttr(attribute, addOrRemove)"

$.fn.toggleAttr = function(a, b) {
    var c = (b === undefined);
    return this.each(function() {
        if((c && !$(this).is("["+a+"]")) || (!c && b)) $(this).attr(a,a);
        else $(this).removeAttr(a);
    });
};

Note, this is xhtml compatible, and is designed for attributes such as "disabled", "enabled", "checked", "selected" and so on.

Example of use (for your scenario):

$('#imageCheckBoxes img').click(function() {
    $(this).parent('span').find('input:checkbox').toggleAttr('checked');
}

EDIT - though as pointed out by artlung - a label is probably best for your scenario

Nice. Making an extension for it, makes the rest of the code more readable. — Ideogram, Aug 14 '14 at 12:20

score 2 · Answer 3 · answered Jul 07 '11 at 21:58

Another possible approach:

$('#imageCheckBoxes').delegate('img', 'click', function(){
    var $associatedCheckbox = $(this).siblings('input:checkbox');
    if ($associatedCheckbox.is(':checked')){
        $(this).removeClass('checked');
        $associatedCheckbox.removeAttr('checked');
    } else {
        $(this).addClass('checked');
        $associatedCheckbox.attr('checked', 'checked');
    }
});

I'm using delegate(), though you could just as easily use your standard click() or a bind() call to add the listening function.

I also have added some code to add a class to the image. If you, say, wanted to give visual feedback to the user, you could implement that with your .checked class on those images.

#imageCheckboxes img {
  border: 2px solid #fff;
}
/* feedback for your users! */
#imageCheckboxes img.checked {
  border: 2px solid #6f6;
}

Now, it strikes me that you could also avoid JavaScript for this, and simple put <label> tags around your images, and then associate them with your checkboxes to get the same effect. Just replace your <span>s in your html with <label>.

Using `label`s is probably the best idea. +1 for that. – Felix Kling Jul 07 '11 at 22:03 — Felix Kling, Jul 07 '11 at 22:03

brenjt · Answer 4 · 2011-07-07T21:59:22.097

1

Try this.

$('#imageCheckBoxes img').click(function() {
    var el = $(this).parent('span').find('input:checkbox');
    if(el.is(':checked'))
        el.attr('checked', '');
    else
        el.attr('checked', 'checked');
});

edited Jul 07 '11 at 21:59

answered Jul 07 '11 at 21:43

brenjt

15,133
11
74
114

*"I need to basically toggle the check attr() part."* I don't see how you address that issue... you just provide an alternative way to select the elements. But the original selector works fine as well. – Felix Kling Jul 07 '11 at 21:55
You are right. I just updated the answer. My bad, thanks for catching my mistake. – brenjt Jul 07 '11 at 21:59
1

The Ternary operator makes for shorter code: el.attr('checked',(el.is(':checked'))?'':'checked'); – Yuval A. Nov 14 '12 at 19:05

score 0 · Answer 5 · answered Jun 17 '15 at 20:49

My solution was a little more clever:

var $formContainer = $(".form-container"),
    $myCheckbox = $formContainer.find(".my-checkbox"),
    $requiredFields = $formContainer.find("input[required], textarea[required], select[required]").removeAttr("required"); // remove the required attribute on all required form inputs
$myCheckbox.change(function () {
    $formContainer.toggle("fast", function() {
        if ($(this).is(":visible")) {
            $requiredFields.attr("required", true);
        }
        else {
            $requiredFields.removeAttr("required");
        }
    });
});

How to toggle attribute in jQuery

5 Answers5