how to make a check all checkbox using jquery?

how to make a check all checkbox using jquery?

jquery select all checkboxes in table
jquery check all checkboxes by class
uncheck all checkboxes jquery in div
select all checkbox jquery w3schools
multiple checkbox select / deselect using jquery
uncheck all checkbox jquery by class name
how to uncheck select all checkbox when one checkbox is unchecked
select all checkbox jquery jsfiddle

What I'm looking for is when I check "all" all other elements are checked and when I uncheck it all others are unchecked.

$(".dropdown dt a").on('click', function() {
  $(".dropdown dd ul").slideToggle('fast');
});

$(".dropdown dd ul li a").on('click', function() {
  $(".dropdown dd ul").hide();
});

function getSelectedValue(id) {
  return $("#" + id).find("dt a span.value").html();
}

$(document).bind('click', function(e) {
  var $clicked = $(e.target);
  if (!$clicked.parents().hasClass("dropdown")) $(".dropdown dd ul").hide();
});

$('.mutliSelect input[type="checkbox"]').on('click', function() {

  var title = $(this).closest('.mutliSelect').find('input[type="checkbox"]').val(),
    title = $(this).val() + " ";

  if ($(this).is(':checked')) {
    var html = '<span title="' + title + '">' + title + '</span>';
    $('.multiSel').append(html);
    $(".hida").hide();
  } else {
    $('span[title="' + title + '"]').remove();
    var ret = $(".hida");
    $('.dropdown dt a').append(ret);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dl class="dropdown">
  <dt>
    <a>
      <span class="hida">Choisir :</span>
      <p class="multiSel"></p>
    </a>
    </dt>
  <dd>
    <div class="mutliSelect">
      <ul>
        <li> <input type="checkbox" name="ALL" value="All"> All</li>
        <li> <input type="checkbox" name="check_list[]" value="val1">val1</li>
        <li> <input type="checkbox" name="check_list[]" value="val2">val2</li>
        <li> <input type="checkbox" name="check_list[]" value="val3">val3</li>
      </ul>
    </div>
  </dd>
</dl>

I reduced your HTML to the list with the checkboxes:

document.querySelector('[name=ALL]').addEventListener('change', (e) => {
  let checkboxes = e.target.closest('ul').querySelectorAll('input[type=checkbox]');
  Array.from(checkboxes).forEach((cb) => {
    cb.checked = e.target.checked;
  });
})
<ul>
  <li> <input type="checkbox" name="ALL" value="All">All</li>
  <li> <input type="checkbox" name="check_list[]" value="val1">val1</li>
  <li> <input type="checkbox" name="check_list[]" value="val2">val2</li>
  <li> <input type="checkbox" name="check_list[]" value="val3">val3</li>
</ul>

How to check all checkboxes using jQuery?, I've used them many times in my own projects and they work great! If you have multiple check-box groups in single page, Here's another example  Loop all checkboxes and set checked to true when Check all checkbox checked state is TRUE otherwise set all checkboxes checked state to FALSE. hideChecked() Loop on all checked rows and set the display property to none. reset() Using this function reset the table layout.


You should look at each()

Here is a bit of help :

$('[name="ALL"]').on('click', function(){
    $('.mutliSelect input[type="checkbox"]').each(function(){
        $(this).prop('checked') ?  $(this).prop('checked','') : $(this).prop('checked','checked')
    })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="mutliSelect">
  <li> <input type="checkbox" name="ALL" value="All">All</li>
  <li> <input type="checkbox" name="check_list[]" value="val1">val1</li>
  <li> <input type="checkbox" name="check_list[]" value="val2">val2</li>
  <li> <input type="checkbox" name="check_list[]" value="val3">val3</li>
</ul>

How to Select / Deselect All Checkboxes using jQuery – Sanwebe, To Select or Deselect Checkboxes using jQuery, all you need to do is use the prop() method along with the change event to achieve the  The following section describes how to track the status of checkboxes whether it is checked or not using the jQuery prop() method as well as the :checked selector. Using the jQuery prop() Method The jQuery prop() method provides a simple, effective, and reliable way to track down the current status of a checkbox.


$(".mutliSelect input:checkbox").first().click(function(){
    $('.mutliSelect input:checkbox').not(this).prop('checked', this.checked);
});

This code will select the first input checkbox, hook it to the click event, then it will check all the remaining checkboxs but not the first one, if the first checkbox is checked it will check them all otherwise uncheck them all.

Bon courage.

Select / Deselect All CheckBoxes using jQuery, A demonstration of selecting checkboxes using jQuery.We start jQuery Checkboxes: Select All, Select None, and Invert Selection to another group of checkboxes, create more links and adjust the rel attribute accordingly:. the OP was not asking if the checkbox is checked or not, but how to check it – Nicola Peluchetti Jul 27 '11 at 20:18 @Nicola i have update my answer. – diEcho Jul 27 '11 at 20:21 add a comment |


We need to uncheck all checkbox if any of the options are unchecked.

var checkBoxAll = $('ul li> input[name="ALL"]');
var checkBoxOptions = $('ul li> input:not([name="ALL"])');
checkBoxAll.on('change', function() {
  var self = this;
  $(this).closest('ul').find('input[type="checkbox"]').each(function() {
    this.checked = self.checked;
  })
})

// to check or uncheck All checkbox, if all the options are checked.
checkBoxOptions.on('change', function() {
    var isAllChecked = true;
  
  // to find if any of the options is false.
  $(this).closest('ul').find('li> input:not([name="ALL"])').each(function() {
    if (!this.checked) return isAllChecked = false;
  })
  
  checkBoxAll.get(0).checked = isAllChecked;
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li> <input type="checkbox" name="ALL" value="All">All</li>
  <li> <input type="checkbox" name="check_list[]" value="val1">val1</li>
  <li> <input type="checkbox" name="check_list[]" value="val2">val2</li>
  <li> <input type="checkbox" name="check_list[]" value="val3">val3</li>
</ul>

jQuery Checkboxes: Select All, Select None, and Invert Selection · A , You can use this jQuery script in the HTML form or records list. Please check the below demo, we have a “Select all” checkbox at the top and all  Set the checkbox to checked or not checked. The status of the checkbox can be changed using the attr() function like so, to check the box: $('input[name=foo]').attr('checked', true); and like so to uncheck the box: $('input[name=foo]').attr('checked', false); Working example. And finally, here’s the example form in action:


Select / Deselect all checkboxes using jQuery, Its hardly 4 to 5 Line of code Using JQuery. JQuery check box selector helps to selects all elements of type check box. Let have a sample code below. You can use prop() for this, as Before jQuery 1.6, the .attr() method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior. As of jQuery 1.6 , the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes.


How to Check Uncheck All Checkboxes Using Jquery Or Jquery , Make multiple selections easy by implementing jquery uncheck/check all checkboxes functionality in your form. You can check or uncheck a checkbox element or a radio button using the .prop() method:


jQuery Uncheck/Check All Checkboxes, Description: Selects all elements of type checkbox. Because :checkbox is a jQuery extension and not part of the CSS specification, queries using :checkbox  Here Mudassar Ahmed Khan has explained how to check uncheck all (select unselect all) CheckBoxes in ASP.Net CheckBoxList control using jQuery. The check uncheck all functionality will be done using an additional CheckBox that will act as Check All CheckBox for the ASP.Net CheckBoxList control.