Get Attribute Javascript - jQuery

Question

I have the following HTML :

<label>
    <input type='checkbox' checked="checked" />
    CLICK ME....
</label>

and script :

$(document).ready(function(){
    $("label").on("click",function(){
        if ($(this).children("input[type='checkbox']").is(':checked'))
        {
            //alert("checked");
           // return false;
        }
        else

        {
           // alert("not checked");
              // return false;        
        }
    });
});

How can i get the checked state ? If its checked i want to perform some operations other ways some other .

I used Live/On because the contend is dynamically added.

Please check this jSfiddle

tutorial here: http://jquery-howto.blogspot.com/2008/12/how-to-check-if-checkbox-is-checked.html — FLY, Jan 03 '12 at 09:14
@scubaFLY Thank you ,but i am failed to use `.is`,`.attr`,`.prop` methods...thats why i put a question. — Red, Jan 03 '12 at 09:17
@BartekR 1.7....also pls check the jsfiddle http://jsfiddle.net/5N7cW/10/ — Red, Jan 03 '12 at 09:30
You should not wrap the `input` with the `label` as it can trigger an extra `click`. — Stefan, Jan 03 '12 at 09:32
@Stefan i think that i can prevent that by using `return false;` — Red, Jan 03 '12 at 09:37

FLY · Answer 1 · 2012-01-03T10:27:52.683

0

Found your solution:

HTML:

<label>
    <input type='checkbox' checked="checked" />
    CLICK ME....
</label>

jQuery:

$(document).ready(function(){
    $("label").change(function(){
        alert($(this).children("input[type='checkbox']").prop('checked'));
    });
});

alerts the current state.

working demo 3 with label as parent of input

edited Jan 03 '12 at 10:27

answered Jan 03 '12 at 09:17

FLY

2,379
5
29
40

please take a look at the Question. – Red Jan 03 '12 at 09:19
not sure if you want to check the state after the onclick event? but otherwise you could use the .each() function as @erimerturk is suggesting. What do you want to do? – FLY Jan 03 '12 at 09:27
i need the current state : when i click i need the current state. – Red Jan 03 '12 at 09:32
This is the theory ,but sometimes this simpleness will destruct our time ,Please see this jsfiddle [pardon me if i cant express the real problem] http://jsfiddle.net/5N7cW/12/ Pleasee try to click on that label instead of checkbox ,the problem when we click on label we need to triger the change to input but when we click on input it automatically triger the click – Red Jan 03 '12 at 09:50
1

hmm I see the problem. But labels are not used this way see [link](http://www.10sharpdesign.com/accessibility/forms/3b-ii-labels-checkboxes.html) and then you could use an change() on the checkbox to trigger instead of the on click – FLY Jan 03 '12 at 10:11
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/6342/discussion-between-scubafly-and-dileep-dil) – FLY Jan 03 '12 at 10:28

score 0 · Answer 2 · answered Jan 03 '12 at 09:19

0

Try this:

$(document).ready(function(){
    $("label").click(function(){
        if ($(this).children("input[type='checkbox']").prop("checked")
        {
            //alert("checked");
           // return false;
        }
        else

        {
           // alert("not checked");
              // return false;        
        }
    });
});

answered Jan 03 '12 at 09:19

Noodles

900
4
14
30

1

.prop("checked") was added in later versions of jquery (1.6+ I think) – Noodles Jan 03 '12 at 09:19

erimerturk · Answer 3 · 2012-01-03T09:34:45.507

0

     $("label").on("click",function(){

    $.each($(this).children("input[type='checkbox']"), function(index, value){

     if ($(value).is(':checked'))
            {
                //alert("checked");
               // return false;
            }else
            {
            }
    }) 
});

edited Jan 03 '12 at 09:34

answered Jan 03 '12 at 09:20

erimerturk

4,230
25
25

Thank you ,But pls check the updated jsfiddle ,try to click on that `label` http://jsfiddle.net/5N7cW/12/ – Red Jan 03 '12 at 09:44

score 0 · Answer 4 · edited Jun 20 '20 at 09:12

0

works with latest jQuery v (1.7)

TIP : use for attribute wisely.. see the for in label

HTML

<input type='checkbox' id="mycheckbox"/>
<label for="mycheckbox"> CLICK ME....</label>

javascript

  $('input[type=checkbox]').on('click',function() {
        var checkboxStatus = $(this).prop('checked');
        alert(checkboxStatus);
        if(checkboxStatus)
        {
            alert('now checkbox is checked');
        } 
        else
        {
            alert('now checkbox is unchecked');
        } 
    });

working DEMO

edited Jun 20 '20 at 09:12

Community

1
1

answered Jan 03 '12 at 09:34

xkeshav

53,360
44
177
245

This one is working ,But the HTML markup is incorrect [Please see my question `input` is inside the `label1`] – Red Jan 03 '12 at 09:39
you have used wrong way. by my markup style you can check the checkbox by click on text too.. this is what `for` attribute is used for – xkeshav Jan 03 '12 at 09:40
1

You should not use `$('input[type=checkbox]').prop('checked');` within the event handler to access the current element. `$(this).prop('checked')` or even `this.checked` is better. http://jsfiddle.net/Ud9Gt/ – Stefan Jan 03 '12 at 09:49
@Stefan : yes your are right. I have updated my answer. but keeping in `var` is better way – xkeshav Jan 03 '12 at 09:52
@DileepDil : I dint write such a crap code. what wrong with my solution. you must need to change the place of `label` – xkeshav Jan 03 '12 at 10:13
Prdon me diEcho ,Your solution works well ,But i cant make two answers[I know it ,but stackoverflow need a rethink about this]. – Red Jan 03 '12 at 11:02

score 0 · Accepted Answer · edited May 23 '17 at 11:48

Tried this and worked (jQuery 1.7.1):

<label>
    <input type='checkbox' checked="checked" />
    CLICK ME....
</label>
<div id="result"></div>

$(document).ready(function(){
    $("label").live("click",function(){
        var elem = $(this).children("input[type='checkbox']");

        $('#result').html('prop: ' + elem.prop('checked'));
    });
});

jsFiddle: http://jsfiddle.net/tNGqs/

UPDATE: After your comments I've created second jsfiddle: http://jsfiddle.net/8ByqX/

As I understand you want to get rid of firing event on child element. You should define stop propagation on element:

$(value).click(function(e) {
    e.stopPropagation();
});

Look also at Hello71's comment on accepted answer here:

How to check for a click in a parent element, but not in the child?

Rafay · Answer 6 · 2012-01-03T10:13:20.237

0

$("label").on("click",function(e){

    if($(this).find(":checkbox").prop("checked"))
    {
     alert("checked now...now make it unchecked");
       $(this) .children("input[type='checkbox']").prop("checked",false);
    }
    else{
    alert("not checked");
         $(this) .children("input[type='checkbox']").prop("checked",true);
    }
e.preventDefault();   

});

http://jsfiddle.net/5N7cW/21/

edited Jan 03 '12 at 10:13

answered Jan 03 '12 at 10:00

Rafay

30,950
5
68
101

Please check this jsfiddle http://jsfiddle.net/5N7cW/19/ ,the else part is not working... – Red Jan 03 '12 at 10:10

Get Attribute Javascript - jQuery

6 Answers6

HTML

javascript