How do I check/uncheck all checkboxes with a button using jQuery?

I am trying to check/uncheck all checkboxes using jQuery. Now by checking/unchecking the parent checkbox all the child checkboxes are getting selected/deselected also with the text of parent checkbox getting changed to checkall/uncheckall.

Now I want to replace parent checkbox with an input button, and change the text also on the button to checkall/uncheckall. THere is the code, can anyone please tweak the code ?

    $( function() {
        $( '.checkAll' ).live( 'change', function() {
            $( '.cb-element' ).attr( 'checked', $( this ).is( ':checked' ) ? 'checked' : '' );
            $( this ).next().text( $( this ).is( ':checked' ) ? 'Uncheck All' : 'Check All' );
        });
        $( '.cb-element' ).live( 'change', function() {
            $( '.cb-element' ).length == $( '.cb-element:checked' ).length ? $( '.checkAll' ).attr( 'checked', 'checked' ).next().text( 'Uncheck All' ) : $( '.checkAll' ).attr( 'checked', '' ).next().text( 'Check All' );

        });
    });


   <input type="checkbox" class="checkAll" /> <b>Check All</b>

   <input type="checkbox" class="cb-element" /> Checkbox  1
   <input type="checkbox" class="cb-element" /> Checkbox  2
   <input type="checkbox" class="cb-element" /> Checkbox  3

Try this one :

$(document).ready(function(){
    $('.check:button').toggle(function(){
        $('input:checkbox').attr('checked','checked');
        $(this).val('uncheck all');
    },function(){
        $('input:checkbox').removeAttr('checked');
        $(this).val('check all');        
    })
})

DEMO

How do I check/uncheck all checkboxes with a button using jQuery , In this tutorial, we are going to see how to check or uncheck group of checkboxes using jQuery. We can use this feature in various scenarios� You can use the prop()method to check or uncheck a checkbox, such as on click of a button. The method requires jQuery 1.6+.

This is the shortest way I've found (needs jQuery1.6+)

HTML:

<input type="checkbox" id="checkAll"/>

JS:

$("#checkAll").change(function () {
    $("input:checkbox").prop('checked', $(this).prop("checked"));
});

I'm using .prop as .attr doesn't work for checkboxes in jQuery 1.6+ unless you've explicitly added a checked attribute to your input tag.

Example-

$("#checkAll").change(function () {
    $("input:checkbox").prop('checked', $(this).prop("checked"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="#">
    <p><label><input type="checkbox" id="checkAll"/> Check all</label></p>
    
    <fieldset>
        <legend>Loads of checkboxes</legend>
        <p><label><input type="checkbox" /> Option 1</label></p>
        <p><label><input type="checkbox" /> Option 2</label></p>
        <p><label><input type="checkbox" /> Option 3</label></p>
        <p><label><input type="checkbox" /> Option 4</label></p>
    </fieldset>
</form>

Check Uncheck All Checkbox using jQuery, Create a List box and a checkbox for select or unselect all options in List. HTML Create two buttons to hide the checked rows or reset the layout with jQuery. You can check or uncheck a checkbox element or a radio button using the .prop () method: 1. 2. 3. 4. 5. // Check #x. $ ( "#x" ).prop ( "checked", true );

Try This One:

HTML

<input type="checkbox" name="all" id="checkall" />

JavaScript

$('#checkall:checkbox').change(function () {
   if($(this).attr("checked")) $('input:checkbox').attr('checked','checked');
   else $('input:checkbox').removeAttr('checked');
});​

DEMO

How to Check and uncheck all using jQuery and JavaScript, If you are looking for a quick jQuery snippet that toggles multiple check-boxes checked status simply by clicking "Select All" checkbox (like in� Click the "Next" button. Click on the "Test Query" for checking the query and click on the "Finish" button. Run the page to check it. Add 2 events in the code section. For Lower Checkboxes: to check the header checkbox if all are checked otherwise uncheck the header checkbox.

Html

<input type="checkbox" name="select_all" id="select_all" class="checkAll" />

Javascript

    $('.checkAll').click(function(){
    if($(this).attr('checked')){
        $('input:checkbox').attr('checked',true);
    }
    else{
        $('input:checkbox').attr('checked',false);
    }
});

How to Select / Deselect All Checkboxes using jQuery – Sanwebe, You can use the jQuery prop() method to check or uncheck a checkbox dynamically such as on click of button or an hyperlink etc. The prop() method require� Perform its opposite if the checkbox checked state is FALSE. Select change event. This one is only for changing the checkbox state based on option selection. Check total options and total selected options if it is equal then set Select All checkbox checked otherwise unchecked it.

Solution for toggling checkboxes using a button, compatible with jQuery 1.9+ where toogle-event is no longer available:

$('.check:button').click(function(){
      var checked = !$(this).data('checked');
      $('input:checkbox').prop('checked', checked);
      $(this).val(checked ? 'uncheck all' : 'check all' )
      $(this).data('checked', checked);
});

DEMO

How to Check or Uncheck A Checkbox Dynamically Using jQuery, To Select or Deselect Checkboxes using jQuery, all you need to do is Also check out jQuery Checkbox and Radio Button Miscellaneous Tips. For jQuery < 1.6: To check/uncheck a checkbox, use the attribute checked and alter that. With jQuery you can do: jquery - refresh buttons after dinamically

Select / Deselect All CheckBoxes using jQuery, 1. <form action="#">. 2. <p><label><input type="checkbox" id="checkAll"/> Check all</label></p>. 3. 4. <fieldset>. 5. <legend>Loads of checkboxes</legend>. 6. This code binds click event to “Select All” checkbox. It will search for all the checkbox inside the checkItems (as checkbox list, when rendered becomes a table. See the view source.) and set the checked attribute to the value of “Select All” checkbox. 2 Lines of code can serve your purpose. That’s why I love JQuery.

jQuery check uncheck all checkboxes - JSFiddle, jquery select all checkboxes,check and uncheck all checkbox using jquery,jquery check if checkbox is checked,jquery prop function,jquery uncheck all� A checkbox’s state can be changed using the HTMLInputElement’s checked attribute. To check or uncheck all checkboxes, you can set the checked attribute individually for each checkbox.

Check and Uncheck all checkbox using jQuery Example, A quick little jQuery snippet in order to select all checkboxes in a list of. That way you can select or deselect all. Favorite heart outline button Favorite heart button 1 gets checked, you'd have to on click, find all the other check boxes, see if they're all checked and set the Select All box accordingly. We used jQuery to accomplish this, moreover we have explained two ways to do the same, one is by using button to check/uncheck all options, and other one is by using a single checkbox to check/uncheck all options. All you have to do is just follow or download our code as per your requirement and implement it in your forms.

Comments
  • angulartutorial.net/2015/11/…
  • Check Tutorial with jQuery freakyjolly.com/…
  • -1 as toggle is not meant for working like that: api.jquery.com/toggle (at least the current version)
  • Only works for one button, if you need several it is best to use .click()
  • Heads up: this answer checks literally every checkbox in your form. Skip unless you want that. For multiple checkalls this answer helped me: stackoverflow.com/a/27148382/3448554
  • I tried this code, but why does my checkbox disappears ? xD and it has a "display:none" property on it
  • With the newest versions of jQuery, .attr() and removeAttr() shouldn't be used with the "checked" attribute. As removeAttr() will remove the attribute instead of setting it to false. .prop('checked', true) or .prop('checked', false) should be used instead, as explained in @richard-garside answer.
  • How do you use this one? Any chance of seeing a fiddle?
  • Simple answer, but OP wanted a button
  • How do you "deselect all" in this way?
  • @MichalSkop This code selects or deselects based on whether the #checkAll is checked or not. If you want to uncheck all then you can just use the value false like this $("input:checkbox").prop('checked', false);
  • Thanks, very easy!
  • Yes thanks this code perfect, even if it changes from DOM LEVEL. I have been tried hard to code, but even i tried other plugins that too are not working.. This one is perfect.
  • Use .prop instead of .attr if you're using jQuery1.6+