jquery check all checkboxes

Question

I used jquery select all checkboxes to try and get a check all checkboxes button. Using the code from this answer, My button disappears immediately as seen on this Fiddle

JS:

$(function(){

    $('#checkAll').toggle(
            function(){
                    $('#numberList .numberClass').prop('checked',true);
            },
            function(){
                    $('#numberList .numberClass').prop('checked',false);
            });
});

HTML:

 <div id='numberList'>
 <table>
<tr>
<th>
    <input type='button' id='checkAll' name='checkAll' value='Check All'>
    </td>
</tr>
<tr>
<td>
    <input class='numberClass' type='checkbox' id='number[" . $k . "]' name='number[" . $k . "]'>
</td>
</tr>
<tr>
<td>
    <input class='numberClass' type='checkbox' id='number[" . $k . "]' name='number[" . $k . "]'>
</td></tr>
 </table>
 </div>

what is so obvious that i am missing?

Try $('#checkAll').click(

Nicolas
– Nicolas

2014-08-15 13:54:19 +00:00
Commented Aug 15, 2014 at 13:54 — Nicolas
– Nicolas, Commented Aug 15, 2014 at 13:54

Anthony Grist · Accepted Answer · 2014-08-15 13:56:01Z

4

The .toggle(function, function) version (i.e. the event handling aspect) was removed in jQuery 1.9, as stated in the documentation. As such, it's treating it as the other .toggle() method, which is used to toggle the visibility of a set of elements - since it's set to visible with your HTML and CSS, jQuery is toggling it to not being visible.

answered Aug 15, 2014 at 13:56

Anthony Grist

38.4k8 gold badges64 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

bart2puck Over a year ago

ahh, thats an old post i was using. thanks. will accept in 9 minutes.

Karma · Accepted Answer · 2014-08-15 14:00:57Z

0

Are you sure about the toggle() function? The description in the jQuery documentation clearly states:

Display or hide the matched elements.

Have a look at the updated Fiddle: http://jsfiddle.net/o0bpdr53/12/

answered Aug 15, 2014 at 14:00

Karma

2,2261 gold badge24 silver badges31 bronze badges

1 Comment

Anthony Grist Over a year ago

I kind of want to downvote just for using 0 and 1 to track a boolean state in a language that supports boolean true and false values... Use an actual boolean and you can get rid of the if statement entirely: jsfiddle.net/o0bpdr53/14

Shai · Accepted Answer · 2014-08-15 14:06:25Z

As Anthony said, using .toggle in the way you are here was deprecated in jQuery 1.8 and removed in 1.9. .toggle now toggles element visibility, which is why you're seeing the button disappear.

Reading the source for the now-removed .toggle in jQuery 1.8 could give a clue to fixing this. One way, to avoid global variables, would be to use .data() to store the current state of the checkboxes:

$('#checkAll').click(
    function () {
        var currentlyChecked = $(this).data('checked') || false,
            shouldBecomeChecked = !currentlyChecked;

        $('#numberList .numberClass').prop('checked', shouldBecomeChecked);

        $(this).data('checked', shouldBecomeChecked);
    }
);

http://jsfiddle.net/o0bpdr53/15/

bart2puck · Accepted Answer · 2014-08-15 14:16:08Z

0

My solution was the following:

        $('#checkAll').change(

            function(){
                    if ($(this).prop('checked')){
                            var status = true;
                    }
                    else{
                            var status = false;
                    }
                            $('.numberClass').prop('checked',status);
            });

Thanks to all the commenters.

answered Aug 15, 2014 at 14:16

bart2puck

2,5203 gold badges33 silver badges61 bronze badges

Collectives™ on Stack Overflow

jquery check all checkboxes

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related