JQuery hidden checkbox checking, but not unchecking

Question

I have created a replacement img checkbox for the site I am working on. I can successfully get the checkbox to check, but not to uncheck. I can see this change in Inspect.

What is wrong with the code? There are no errors in the page. Thanks!

HTML is:

<input type="checkbox" id="AcceptTerms_check" name="AcceptTerms_check" style="display:none;">
<img class="chk-img" id="AcceptTerms" onclick="CheckboxClick(this);" src="../../../wp-content/uploads/misc/notselected.png">
<span id="ts-cs-accept">I have read and accepted the terms</span>.

JS is:

function CheckboxClick(element) {
    if(jQuery('input:checkbox[name=' + element.id + '_check]').is(":checked")) {
        jQuery('input:checkbox[name=' + element.id + '_check]').attr('checked','false');
        jQuery(element).attr("src", "../../../wp-content/uploads/misc/notselected.png");
    } else {
        jQuery('input:checkbox[name=' + element.id + '_check]').attr('checked','true');
        jQuery(element).attr("src", "../../../wp-content/uploads/misc/selected.png");
    };
};

Use .prop() instead of .attr()

Satpal
– Satpal

2014-10-13 13:27:16 +00:00
Commented Oct 13, 2014 at 13:27 — Satpal
– Satpal, Commented Oct 13, 2014 at 13:27

iCollect.it Ltd · Accepted Answer · 2014-10-13 13:56:33Z

4

Always use prop with checkboxes, as you can use true and false values directly. You can also reduce your code a lot and not repeat complex jQuery selectors:

function CheckboxClick(element) {
    var $checkbox = jQuery('input:checkbox[name=' + element.id + '_check]')
    if($checkbox.prop("checked")) {
        $checkbox.prop('checked', false);
        jQuery(element).attr("src", "../../../wp-content/uploads/misc/notselected.png");
    } else {
        $checkbox.prop('checked', true);
        jQuery(element).attr("src", "../../../wp-content/uploads/misc/selected.png");
    };
};

This can be simplified further, but I wanted you to still recognize your code :)

e.g. you can toggle it with:

$checkbox.prop("checked", !$checkbox.prop("checked"));

Update... Do not use attribute based events with jQuery (e.g. onclick=), use the jQuery way:

Try this way instead: http://jsfiddle.net/noy45sjg/1/

jQuery('.chk-img').click(function (e) {
    var element = jQuery(this);
    var $checkbox = jQuery('input:checkbox[name=' + this.id + '_check]');
    if($checkbox.prop("checked")) {
        $checkbox.prop('checked', false);
        jQuery(element).attr("src", "../../../wp-content/uploads/misc/notselected.png");
    } else {
        $checkbox.prop('checked', true);
        jQuery(element).attr("src", "../../../wp-content/uploads/misc/selected.png");
    }
});

edited Oct 13, 2014 at 13:56

answered Oct 13, 2014 at 13:31

iCollect.it Ltd

93.9k26 gold badges189 silver badges210 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

SSA Over a year ago

Isn't a boolean value you need to provide. true and false and not 'true' and 'false'

TheRealPapa Over a year ago

Hey TrueBlueAussie another late night for you too! Your suggestion works on changing the image but I cannot see the checkbox (in inspect) change to checked and back. I added an alert with alert(jQuery('input:checkbox[name=' + element.id + '_check]').val()); at the end of your code and the alert shows on always.

iCollect.it Ltd Over a year ago

@TheRealPapa: Practical working fiddle added. If you use an odd browser you may need to add alt text to the image to see it in the fiddle.

TheRealPapa Over a year ago

AWESOME, many thanks! I have some paid work if you are interested. How do I contact you via email?

iCollect.it Ltd Over a year ago

Glad it helped. Go though my website link contact page. I get enough spam already without posting it here :) Cheers.

Collectives™ on Stack Overflow

JQuery hidden checkbox checking, but not unchecking

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related