select all checkbox only works twice

Question

I got this code from stackoverflow which looks like a pretty good \"select all\" checkbox solution, any ideas why it fails after 2nd click?

http://jsfiddle.net/R9zj

Answer 1

This Will Work, Short and handy Code

<script>
    $('#select_all').click(function () {
    $( this ).closest('table').find(':checkbox').prop( 'checked' , this.checked ? true : false );
})
</script>

Answer 2

Try using .attr('checked', 'checked')

$(document).ready(function () {
    $(document).on("click", ".selectall2", function () {
        $(this).closest('tr').find('input[type=checkbox]').attr('checked', 'checked');
    });
});

Answer 3

use .prop() instead of .attr() above jQuery 1.6

If using jQuery 1.6, the code if ( $(elem).attr("checked") ) will retrieve the actual content attribute, which does not change as the checkbox is checked and unchecked. It is meant only to store the default or initial value of the checked property. To maintain backwards compatability, the .attr() method in jQuery 1.6.1+ will retrieve and update the property for you so no code for boolean attributes is required to be changed to .prop(). Nevertheless, the preferred way to retrieve a checked value is with one of the options listed above. To see how this works in the latest jQuery, check/uncheck the checkbox in the example below.

See .prop()

demo - http://jsfiddle.net/f9QYx/

Answer 4

some problem is solved see the live demo at here

HTML code is:

<table>
    <tr>
        <td>
            <input type='checkbox' value='0' class='abc'>
        </td>
        <td>
            <input type='checkbox' value='0' class='abc'>
        </td>
        <td>
            <input type='checkbox' value='0' class='abc'>
        </td>
        <td width="100" align="right">
            select all <input type='checkbox' value='0' class='selectall2'>
        </td>
    </tr>
</table>

and Javascript is:

$(document).ready(function () {
    $(document).on("click", ".selectall2", function () {
        $(this).closest('tr').find('input[type=checkbox]').attr('checked', this.checked);
    });
    $(document).on("click",".abc",function(){
        var temp=0;
        if(!$(".abc").attr('checked'))
        {
            temp=1;
        }
        if(temp==0)
        {
                    $(".selectall2").attr('checked',true);
        }
        else
        {
                    $(".selectall2").attr('checked',false);
        }
    });
});

Answer 5

You code does not work on jQuery 1.9 and is because of framework of jQuery version you have, choose 1.8.3 and it would work.

Live Demo

$(document).ready(function () {
    $(document).on("click", ".selectall2", function () {
        $(this).closest('tr').find('input[type=checkbox]').attr('checked', this.checked);
    });
});

You should use prop instead of attr for jQuery 1.6 and above

Live Demo

$(document).ready(function () {
    $(document).on("click", ".selectall2", function () {
        $(this).closest('tr').find('input[type=checkbox]').prop('checked', this.checked);
    });
});

As of jQuery 1.6, the .attr() method returns undefined for attributes that have not been set. To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method, jQuery doc