How to Check All Checkboxes Using Jquery

How to check all checkboxes using jQuery?

You need to use .prop() to set the checked property

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

Demo: Fiddle

Select All checkboxes using jQuery

Use prop

$(".checkBoxClass").prop('checked', true);

or to uncheck:

$(".checkBoxClass").prop('checked', false);

http://jsfiddle.net/sVQwA/

$("#ckbCheckAll").click(function () {
    $(".checkBoxClass").prop('checked', $(this).prop('checked'));
});

Updated JSFiddle Link: http://jsfiddle.net/sVQwA/1/

How to check all Checkboxes using jQuery

id for each element in a HTML page have to be unique. So either keep unique id or provide class for checkbox instead of id and class can be same. No uniqueness to maintain with class.

Attach on click/change event to .checkAll checkbox which has been changed to class here instead of id and set all .checkbox property based on the checked property of .checkAll checkbox. Below is the snippet.

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><ul class="items">  <li class="item checkall">    <label>      <input type="checkbox" name="item[]" class="checkAll">      <span></span>      <p>Check All Items</p>    </label>  </li>  <li class="item">    <label>      <input type="checkbox" name="item[]" class="checkbox" value="1">      <span></span>      <p>Learn HTML5.1</p>    </label>  </li>  <li class="item">    <label>      <input type="checkbox" name="item[]" class="checkbox" value="2">      <span></span>      <p>Learn PHP7</p>    </label>  </li>  <li class="item">    <label>      <input type="checkbox" name="item[]" class="checkbox" value="4">      <span></span>      <p>Program a Website</p>    </label>  </li></ul>

Check and uncheck all checkboxes with jquery

This might be the correct way..

Use prop instead of attr and group the checkbox list inside a div, just for organizing purposes. Also use the checked as it is, don't negate it.

$(document).ready(function() {  $('#checkall').click(function() {    var checked = $(this).prop('checked');    $('#checkboxes').find('input:checkbox').prop('checked', checked);  });})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><input type="checkbox" id="checkall" /><label for="checkall">check / uncheck all</label><br/><br/><div id="checkboxes">  <input type="checkbox" />  <input type="checkbox" />  <input type="checkbox" />  <input type="checkbox" />  <input type="checkbox" />  <input type="checkbox" />  <input type="checkbox" />
</div>

jQuery - toggle select all checkboxes

Since you are using jQuery, you should use an onclick handler like below for selectAll.

$(':checkbox[name=selectAll]').click (function () {
  $(':checkbox[name=domainList]').prop('checked', this.checked);
});

Please note that the above code is going to look into the entire dom for the checkbox with name=selectAll and set the status of the checkbox with name=domainList.

Below is a slightly better version with minor markup change,

jsFiddle DEMO

$('#selectAllDomainList').click(function() {  var checkedStatus = this.checked;  $('#domainTable tbody tr').find('td:first :checkbox').each(function() {    $(this).prop('checked', checkedStatus);  });});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><table id="domainTable">  <!-- Added ID -->  <thead>    <tr>      <th>        <!-- Added ID to below select box -->        <input type="checkbox" name="selectAll" id="selectAllDomainList" />      </th>    </tr>  </thead>  <tbody>    <tr>      <td>        <input type="checkbox" name="domainList" value="${domainInstance.id}" />      </td>    </tr>    <tr>      <td>        <input type="checkbox" name="domainList" value="${domainInstance.id}" />      </td>    </tr>    <tr>      <td>        <input type="checkbox" name="domainList" value="${domainInstance.id}" />      </td>    </tr>    <tr>      <td>        <input type="checkbox" name="domainList" value="${domainInstance.id}" />      </td>    </tr>  </tbody>  <table>

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

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

checking all checkboxes jquery

Use prop method. When your markup is rendered attributes become properties of the elements, using JavaScript you should modify properties of the element.

$(document).on('change','input[name="check_all"]',function() {
    $('.idRow').prop("checked" , this.checked);
});

http://jsfiddle.net/GW64e/

Note that if input[name="check_all"] is not generated dynamically there is no need to delegate the event.

Checking Multiple checkboxes using Jquery

try this demo

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

Check all checkboxes when select all is checked

You need to generalize your code more, there is a bunch of stuff in that other issue that isn't needed if you're just trying to select all checkboxes.

    $('#select_all').change(function() {
        if($(this).is(':checked')) {
            $("input[type='checkbox']").attr('checked', 'checked');
        } else {
            $("input[type='checkbox']").removeAttr('checked');
        }
    });
        $("input[type='checkbox']").not('#select_all').change( function() {
        $('#select_all').removeAttr('checked');
    });

DEMO

---

Related Topics