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

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 2

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 3

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

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

Answer 4

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 5

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.

Answer 6

Not working. What is === ?

Answer 7

=== is a type safe comparator for JS

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