CODEWITHSUNDEEP
javascriptjquery
Prabhakaran
Prabhakaran

Reputation: 3999

jquery uncheck and check and vise versa checkbox of child element

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

Upvotes: 0

Views: 554

Answers (3)

nnnnnn
nnnnnn

Reputation: 150010

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.

Upvotes: 0

WannaCSharp
WannaCSharp

Reputation: 1898

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

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

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

Upvotes: 1

Related Questions