Checking and Unchecking Checkbox with Jquery

Question

I am trying to get a checkbox to check and uncheck if it isn't/is checked. It is checking if unchecked - but not unchecking if yes checked. Very strange. Thanks in advance!

Here's my code:

EDIT: Here's the jsfiddle: http://jsfiddle.net/itamark/UnR4X/

JS:

$(':checkbox').mouseenter(function(){
    if($(this).not(':checked')) {
        alert('notchecked');
        $(this).attr('checked', true);
    }
    else if($(this).is(':checked')){
        alert('ischecked');
        $(this).attr('checked', false);
    }


})

HTML:

<input type="checkbox" name"myCheck" id="chk1"/>Checkbox</label>

Try this - http://stackoverflow.com/questions/426258/how-do-i-check-a-checkbox-with-jquery-or-javascript — Jon La Marr, Aug 02 '13 at 20:47
Doing this on hover is kind of pointless, since as soon as you un-hover/mouse-out the checkbox will *always* be unchecked, regardless of the user's behaviour. What's the point of this? — David Thomas, Aug 02 '13 at 20:59
@DavidThomas Yes - I've actually switched to `.mouseenter` since. I'll update the code. — itamar, Aug 02 '13 at 21:02
But again: what's the point? What is it you're trying to do? — David Thomas, Aug 02 '13 at 21:04
@DavidThomas I manage a website that requires an exorbitant amount of checkbox clicks for some tasks, and the checkall chrome extension only allows either all or all in an element neither of which help. So I figured I'd try to build my first chrome extension to help others who have the same problem. — itamar, Aug 02 '13 at 21:11

score 4 · Accepted Answer · answered Aug 02 '13 at 20:52

.is() and .not() are not the same

.is() return true or false while .not() remove jQuery element if it match.

Therefor, $(selector).not() will always be true since jquery is defined.

To check if the element exist, use .length.

$(':checkbox').hover(function(){
    if($(this).not(':checked').length) {
        $(this).prop('checked', true);
    }
    else if($(this).is(':checked')){
        $(this).prop('checked', false);
    }
})

Fiddle :http://jsfiddle.net/UnR4X/3/

You might aswell use a 1 liner :

$(this).prop('checked', !$(this).prop('checked'));

While all of the others were very helpful - this one-liner worked fine. I also learned that you don't have to have the attribute visually in the element for it to take hold. Is this correct? — itamar, Aug 02 '13 at 21:06

score 1 · Answer 2 · answered Aug 02 '13 at 20:47

1

Use .prop():

$(this).prop('checked', true);
$(this).prop('checked', false);

answered Aug 02 '13 at 20:47

A. Wolff

74,033
9
94
155

That's actually the first method I tried, and it didn't work. Just plugged it in to retry and no cigar. Sorry. – itamar Aug 02 '13 at 20:48
but your jsfiddle need some typo fixed, then it works: http://jsfiddle.net/UnR4X/6/ But not sure what you are looking for exactly. You are using hover in/out handler. Check DOC, you want maybe something else – A. Wolff Aug 02 '13 at 20:54

score 1 · Answer 3 · answered Aug 02 '13 at 20:50

1

I think triggering a click event would change the checked state of the checkbox

$(':checkbox').hover(function() {
  $(this).trigger('click'); 
});

answered Aug 02 '13 at 20:50

callmehiphop

636
5
10

I got excited because this kind of worked. It checks the box but does not add the attribute. tried adding it as a prop and that breaks the check toggle again. – itamar Aug 02 '13 at 20:54
On second thought - it doesn't require a visual `clicked` attribute, right to be considered checked for all intents and purposes, right? – itamar Aug 02 '13 at 21:07

score 1 · Answer 4 · answered Aug 02 '13 at 20:54

1

Working Fiddle

Note the name param of you input needs an equal. Also, hover the wrong event unless you specify a hover in and hover out handler, other wise the function will just keep functioning. Easier to just use mouseenter handler. Only fires on start of hover that way. If you want something else to happen on mouse leave you can specify a mouseleave. Or you can specify 2 functions to do this in the hover function.

$(':checkbox').mouseenter(function(){
        if($(this).prop('checked')) {
            $(this).prop('checked', false);
        }
        else{
            $(this).prop('checked', true);
        }

})

answered Aug 02 '13 at 20:54

Rooster

9,954
8
44
71

Yes - this gives you the checkmark - but I do not see a `checked="checked"` or simply a `checked` attribute in the element yet. – itamar Aug 02 '13 at 20:58
@ItamarOKestenbaum you dont' need checked to be in the element. See this fiddle. http://jsfiddle.net/UnR4X/12/ jquery will still know its checked and an http post will post it as well. – Rooster Aug 02 '13 at 21:07
Phew. That makes things much simpler. Thanks! – itamar Aug 02 '13 at 21:09

score 1 · Answer 5 · answered Aug 02 '13 at 21:04

Here is the working fiddle, http://jsfiddle.net/UnR4X/11/

$(':checkbox').mouseenter(function(){
        if($(this).prop('checked')) {
            $(this).prop('checked', false);
             $(this).removeAttr('checked');
        }
        else{
            $(this).prop('checked', true);
            $(this).attr('checked',true);
        }

Checking and Unchecking Checkbox with Jquery

5 Answers5