jquery uncheck and check and vise versa checkbox of child element

Question

Here is my html

#This will be generated throught loop

<li class="selector">
    <a>
    <input type="checkbox" value="test" /> test
    </a>
</li>

Here is my jquery click event

$('.selector').on('click', function() {
    if($(this).find('input').is(':checked')){
    #uncheck the checkbox       
    }else{
    #check the checkbox
    }
});

How do I uncheck if checked and check if unchecked

Side comment, are you sure you want to bind the event on your li tag and not in the input? and use `on('change')` and not `on('click')` — Drixson Oseña, Nov 02 '13 at 02:31
You can use `.prop()`, you can also check this out [How do I check a checkbox with jQuery](http://stackoverflow.com/questions/426258/how-do-i-check-a-checkbox-with-jquery) — Mark S, Nov 02 '13 at 02:32
Why do you need jQuery/JS here? It is standard behaviour for a click on a checkbox to uncheck it and vice versa. Why do you have your checkbox inside an anchor tag? — nnnnnn, Nov 02 '13 at 02:43

score 1 · Accepted Answer · answered Nov 02 '13 at 02:30

Try

$(document).on('click', '.selector', function (e) {
    if (!$(e.target).is('input')) {
        $(this).find('input').prop('checked', function () {
            return !this.checked;
        });
    }
});

Demo: Fiddle

Another way

$(document).on('click', '.selector', function (e) {
    $(this).find('input').prop('checked', function () {
        return !this.checked;
    });
});
$(document).on('click', '.selector input', function (e) {
    e.stopPropagation();
});

Demo: Fiddle

score 0 · Answer 2 · answered Nov 02 '13 at 02:32

Try this

$('.selector').on('click', function() {
        var checkbox = $(this).find(':checkbox');
        if($(checkbox).is(':checked')){
             $(checkbox).prop('checked', false);     
        }else{
        #check the checkbox
             $(checkbox).prop('checked', true);
        }
    });

nnnnnn · Answer 3 · 2013-11-02T02:58:16.163

I don't understand why you are trying to do this with JavaScript. If the user clicks directly on the checkbox it will automatically check/uncheck itself, but if you add code to check/uncheck it in JS that would cancel out the default behaviour so in your click handler you'd need to test that the click was elsewhere within the .selector.

Anwyay, the .prop() method has you covered:

$('.selector').on('click', function(e) {
    if (e.target.type === "checkbox") return; // do nothing if checkbox clicked directly
    $(this).find("input[type=checkbox]").prop("checked", function(i,v) {
        return !v; // set to opposite of current value
    });
});

Demo: http://jsfiddle.net/N4crP/1/

However, if your goal is just to allow clicking on the text "test" to click the box you don't need JavaScript because that's what a <label> element does:

<li class="selector">
    <label>
    <input type="checkbox" value="test" /> test
    </label>
</li>

As you can see in this demo: http://jsfiddle.net/N4crP/2/ - clicking on the text "test" or the checkbox will toggle the current value without any JavaScript.

jquery uncheck and check and vise versa checkbox of child element

3 Answers3