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
How to Check Connection Type (Wifi/Lan/Wwan) Using Html5/JavaScript
How to Use External ".Js" Files
Does Ie8 Out-Of-The-Box Have Support For 'Localstorage'
PHP+Js: How to Do Fileuploads in HTML Form as Content-Type Multipart (Via Js)
How to Make an HTML Text Box Show a Hint When Empty
How to Prevent JavaScript Injection Attacks Within User-Generated Html
Bootstrap Close Responsive Menu "On Click"
JavaScript Get Element by Name
How to Get the Onclick Calling Object
How to Escape Quotes in HTML Attribute Values
How to Get the Position of Text Within an Element
Fetch(), How to Make a Non-Cached Request
Using Execcommand (JavaScript) to Copy Hidden Text to Clipboard
Open Window in JavaScript With HTML Inserted