Checkbox and JQUERY: "is checked" always FALSE

Question

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>

Answer 1

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

Answer 2

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

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

Answer 3

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?

Answer 4

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.

Answer 5

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">

Answer 6

=== is a type safe comparator for JS

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

Answer 7

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

Answer 8

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.