How to Select All Checkboxes With 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

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>

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 can I select all checkboxes from all the pages in a jQuery DataTable

Try this code instead:

$(document).ready(function () { 
var oTable = $('#example').dataTable({
stateSave: true
});

var allPages = oTable.fnGetNodes();

$('body').on('click', '#selectAll', function () {
if ($(this).hasClass('allChecked')) {
$('input[type="checkbox"]', allPages).prop('checked', false);
} else {
$('input[type="checkbox"]', allPages).prop('checked', true);
}
$(this).toggleClass('allChecked');
})
});

The magic should happen in fnGetNodes():

fnGetNodes(): Get an array of the TR nodes that are used in the table's body

Edit

This alternative solution is mostly for debugging (to see if it works). Hardly optimal code:

$(document).ready(function () { 
var oTable = $('#example').dataTable({
stateSave: true
});

var allPages = oTable.cells( ).nodes( );

$('#selectAll').click(function () {
if ($(this).hasClass('allChecked')) {
$(allPages).find('input[type="checkbox"]').prop('checked', false);
} else {
$(allPages).find('input[type="checkbox"]').prop('checked', true);
}
$(this).toggleClass('allChecked');
})
});

Select All Checkbox with Trigger - jquery

I found answer as below, but still any one have any other best solution let me know , thanks

 $(document).ready(function () {
$("#SelectAll").click(function(){
$(".checkBoxClass").trigger("click");
$(".checkBoxClass").attr('checked', true);
$(".checkBoxClass").attr('checked', $(this).attr('checked')); //add this line and working proper - hope will help someone
});
});

jquery select all checkbox doesn't trigger change event on individual checkbox

The change event is only triggered automatically when the user changes the element, not when it's changed from code. You need to trigger the event explicitly.

$("#selectAll").on( "click", function(e) {
$(':checkbox.all_serp_results_selector').prop('checked', this.checked).change();
});

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



Leave a reply



Submit