CODEWITHSUNDEEP
jquerycheckbox
uzay95
uzay95

Reputation: 16642

Checkbox and JQUERY: "is checked" always FALSE

The code is below and checkbox is always FALSE. But on page it is different. It doesn't get checked or unchecked.

<script type="text/javascript">
 $('.cbOzelHastaAdi').unbind('click');

 $('.cbOzelHastaAdi').click( function() {

    var parentDiv = $(this).parent().get(0);
    var cbs = $(parentDiv).find('table input:checkbox');

   if($(this).attr("checked") === "true") {
        cbs.each(function() { $(this).attr('checked', false); });
    }
    else{
        cbs.each(function() { $(this).attr('checked', true); });
    }

})

</script>

Upvotes: 20

Views: 96598

Answers (8)

user2717833
user2717833

Reputation: 1

This is also working:

(($('input[name="myCheckBox"]:checked').val())=='on')

It will return either true or false

where the checkbox is defined as:

<input type="checkbox" name="myCheckBox">

Upvotes: 0

Wouter Mevius
Wouter Mevius

Reputation: 11

I came across the same problem ones; checking whether a checkbox is checked ( in any of the different ways) always returned false.

My solution (course of problem) was in the JQuery selector that was used.

uzay95 used the class selector ".", to select its checkboxes.

$('.cbOzelHastaAdi')**

Which returns a result set. Therefor, checking if it is checked is invalid, because their might be multiple checkboxes... I know he's using the this keyword in his code, but for me this also did not fix the problem.

As soon as you select the checkbox by ID, you can evaluate its 'checked' attribute.

Upvotes: 1

Corey Downie
Corey Downie

Reputation: 4769

I usually us the .is() functionality of jQuery to check for this 

$('.cbOzelHastaAdi').click( function() {
  if($(this).is(':checked')){
    ...
  }else{
    ...
  }
})

Upvotes: 7

user259304
user259304

Reputation:

=== is a type safe comparator for JS

See: https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Operators/Comparison_Operators

Upvotes: 0

Russ Cam
Russ Cam

Reputation: 125538

One of the problems was that you had the checked attribute on the span surrounding the top checkbox and label and were binding an event handler to the span, therefore checked will always remain checked on the span.

I have moved the event handlers to the checkbox instead and tidied up the code a bit. Whilst I don't believe there is a problem in constructing your own attributes on HTML elements i.e. a checked attribute on a span element (I think XHTML strict validation fails with them), I don't whether it's considered good practice to do so.

I can see that you are using ASP.NET, based on the ID mangling - you can use server side <%= myControl.ClientID %> to get the mangled id to render in the HTML sent to the client.

Working Example here 

   $(function() {     
        $('#rptOzel_ctl00_rptOzelHastalar_ctl00_cbOzelKurumHastasi').unbind('click');
        $('#rptOzel_ctl00_rptOzelHastalar_ctl00_cbOzelKurumHastasi').click( function() {

           var cbs = $('table input:checkbox');  

           if($(this).is(':checked')){
               cbs.each(function() { $(this).attr('checked', true); });
           }
           else{
            cbs.each(function() { $(this).attr('checked', false); });
           }

        });
    });

EDIT:

In response to your comment, you have a couple of options for resolving the clientid. If you write your jQuery in the aspx page, then you can simply use

$('#<%= cbOzelKurumHastasi.ClientID %>')

in place of

$('#rptOzel_ctl00_rptOzelHastalar_ctl00_cbOzelKurumHastasi')

If you have your jQuery in an external script file then you could put this in your aspx page

<script type="text/javascript">
var cbOzelKurumHastasi = '#<%= cbOzelKurumHastasi.ClientID %>';
</script>

and then use the variable in your external script file

$(function() {     
            $(cbOzelKurumHastasi).unbind('click');
            $(cbOzelKurumHastasi).click( function() { ...

For other options take a look at this question and answer - How to stop ASP.NET from changing ids in order to use jQuery

Upvotes: 39

Ben Koehler
Ben Koehler

Reputation: 8681

Russ Cam's answer works, but why not jQueryify it some more?

$(function() {     
    $('.cbOzelHastaAdi').live('click', function() {
        $(this).parents('div').find('table input:checkbox').attr('checked', $(this).attr('checked'));
    });
});

This assumes that the class cbOzelHastaAdi is now attached to the checkbox instead of the span element. This should allow you to avoid all of the messy ASP renaming and allow multiple similar tables per page without the need for multiple click event functions.

Upvotes: 0

Zhaph - Ben Duguid
Zhaph - Ben Duguid

Reputation: 26976

I've found that the following is probably the best way to determine checked status in jQuery:

var cbs = $(parentDiv).find('table input:checkbox:checked');

This will give you an array of each input that has been checked.

This is mostly from the jQuery docs:

Selectors/Checked

Upvotes: 0

Venr
Venr

Reputation: 937

could it be because you are comparing the value of the checked property to a string rather than a boolean and using the === operator which compares both value and type?

Upvotes: 3

Related Questions