is :checked not working while using Jquery 1.7

Question

Look at this simple code

html

<input type="checkbox" id="check" >&nbsp;<span id="rm">Remember
me</span> <span id="ok">Okay!</span>

css

#ok{
position:absolute;
font:italic bold 14px century;
color:green;
margin-left:3px;
margin-top:2px;
display:inline-block;
opacity:0;
}

Jquery

if($('#check').is(":checked"))
    {
    $("#ok").css("opacity",1);
    }

http://jsfiddle.net/milanshah93/4Hf9T/

It is not working when I check the box.

It works for me: http://jsfiddle.net/4Hf9T/10/ you replaced `id` with `is`, and the input has to be checked initially to get the class. What you really need is a change event. — Kevin B, May 14 '13 at 14:03

score 3 · Answer 1 · answered May 14 '13 at 14:06

Your checkbox was not checked on page load. although you can do something like this -

$("#check").on('change', function () {
    if ($(this).is(":checked")) {
        $("#ok").css("opacity", 1);
    }
    else{
     $("#ok").css("opacity", 0);
    }
});

DEMO

A. Wolff · Answer 2 · 2013-05-14T14:09:32.797

1

This is a working jsfiddle: http://jsfiddle.net/4Hf9T/14/

<input type="checkbox" id="check">&nbsp;<span id="rm">Remember me</span>

<span id="ok">Okay!</span>

JS code:

$('#check').on('change',function(){
    if(this.checked)
        $("#ok").css("opacity", 1);
    else 
        $("#ok").css("opacity", 0);
});

edited May 14 '13 at 14:09

answered May 14 '13 at 14:03

A. Wolff

74,033
9
94
155

Karl-André Gagnon · Answer 3 · 2013-05-14T14:10:36.957

No it is working, but your code is not for those 2 reasons.

You misspelled id on the DOM tag.
You have no event listener. You code is running on window load and doesnt check after that. You need to add a binding like change.

Here the proof : http://jsfiddle.net/4Hf9T/13/

$('#check').change(function(){
    if($(this).is(":checked"))
        {
        $("#ok").css("opacity",1);
        }
    else if(!$(this).is(":checked")) // "if" not needed, just showing that you can check if it is not checked.
        {
        $("#ok").css("opacity",0);
        }
})

score 0 · Answer 4 · edited May 23 '17 at 12:16

0

This question has been asked before, and someone posted a detailed answer: https://stackoverflow.com/a/2204275/1745452

The jQuery API Documentation states that it should be working since the first verion. Perhaps you misspelled the selectors?

edited May 23 '17 at 12:16

Community

1
1

answered May 14 '13 at 14:04

Broxzier

2,909
17
36

And this should have been a comment, and the linked to question's answer has nothing to do with this question. – Kevin B May 14 '13 at 14:04
4

@KevinB - so should the other answer, and he has almost 8K rep ! – adeneo May 14 '13 at 14:05

is :checked not working while using Jquery 1.7

4 Answers4

Linked