I have the following:
$(document).ready(function() { $("#select-all-teammembers").click(function() { $("input[name=recipients\\[\\]]").attr('checked', true); }); }); I'd like the id="select-all-teammembers" when clicked to toggle between checked and unchecked. Ideas? that aren't dozens of lines of code?
24 Answers
You can write:
$(document).ready(function() { $("#select-all-teammembers").click(function() { var checkBoxes = $("input[name=recipients\\[\\]]"); checkBoxes.prop("checked", !checkBoxes.prop("checked")); }); }); Before jQuery 1.6, when we only had attr() and not prop(), we used to write:
checkBoxes.attr("checked", !checkBoxes.attr("checked")); But prop() has better semantics than attr() when applied to "boolean" HTML attributes, so it is usually preferred in this situation.
//this toggles the checkbox, and fires its event if it has $('input[type=checkbox]').trigger('click'); //or $('input[type=checkbox]').click(); I know this is old but the question was a bit ambiguous in that toggle may mean each checkbox should toggle its state, whatever that is. If you have 3 checked and 2 unchecked, then toggling would make the first 3 unchecked and the last 2 checked.
For that, none of the solutions here work as they make all the checkboxes have the same state, rather than toggle each checkbox's state. Doing $(':checkbox').prop('checked') on many checkboxes returns the logical AND between all .checked binary properties, i.e. if one of them is unchecked, the returned value is false.
You need to use .each() if you want to actually toggle each checkbox state rather than make them all equal, e.g.
$(':checkbox').each(function () { this.checked = !this.checked; }); Note that you don't need $(this) inside the handler as the .checked property exists in all browsers.
Here is another way that you want.
$(document).ready(function(){ $('#checkp').toggle( function () { $('.check').attr('Checked','Checked'); }, function () { $('.check').removeAttr('Checked'); } ); }); I think it's simpler to just trigger a click:
$("#select-all-teammembers").click(function() { $("input[name=recipients\\[\\]]").trigger('click'); }); The best way I can think of.
$('#selectAll').change(function () { $('.reportCheckbox').prop('checked', this.checked); }); or
$checkBoxes = $(".checkBoxes"); $("#checkAll").change(function (e) { $checkBoxes.prop("checked", this.checked); }); or
<input onchange="toggleAll(this)"> function toggleAll(sender) { $(".checkBoxes").prop("checked", sender.checked); } Use this plugin :
$.fn.toggleCheck =function() { if(this.tagName === 'INPUT') { $(this).prop('checked', !($(this).is(':checked'))); } } Then
$('#myCheckBox').toggleCheck(); Since jQuery 1.6 you can use .prop(function) to toggle the checked state of each found element:
$("input[name=recipients\\[\\]]").prop('checked', function(_, checked) { return !checked; }); Assuming that it's an image that has to toggle the checkbox, this works for me
<img src="something.gif" onclick="$('#checkboxid').prop('checked', !($('#checkboxid').is(':checked')));"> <input type="checkbox"> if you want to toggle each box individually (or just one box works just as well):
I recommend using .each() , as it is easy to modify if you want different things to happen, and still relatively short and easy to read.
e.g. :
// toggle all checkboxes, not all at once but toggle each one for its own checked state: $('input[type="checkbox"]').each(function(){ this.checked = ! this.checked }); // check al even boxes, uncheck all odd boxes: $('input[type="checkbox"]').each(function(i,cb){ cb.checked = (i%2 == 0); }); // set all to checked = x and only trigger change if it actually changed: x = true; $('input[type="checkbox"]').each(function(){ if(this.checked != x){ this.checked = x; $(this).change();} }); on a side note... not sure why everyone uses .attr() or .prop() to (un)check things.
as far as I know, element.checked has always worked the same in all browsers?
Check-all checkbox should be updated itself under certain conditions. Try to click on '#select-all-teammembers' then untick few items and click select-all again. You can see inconsistency. To prevent it use the following trick:
var checkBoxes = $('input[name=recipients\\[\\]]'); $('#select-all-teammembers').click(function() { checkBoxes.prop("checked", !checkBoxes.prop("checked")); $(this).prop("checked", checkBoxes.is(':checked')); }); BTW all checkboxes DOM-object should be cached as described above.
Here is a jQuery way to toggle checkboxes without having to select a checkbox with html5 & labels:
<div> <label>Compare to Last Year</label><br> <label for="01"> <input type="checkbox" name="VIEW" value="01"> Retail units </label> <label for="02"> <input type="checkbox" name="VIEW" value="02"> Retail Dollars </label> <label for="03"> <input type="checkbox" name="VIEW" value="03"> GP Dollars </label> <label for="04"> <input type="checkbox" name="VIEW" value="04"> GP Percent </label> </div> $("input[name='VIEW']:checkbox").change(function() { if($(this).is(':checked')) { $("input[name='VIEW']:checkbox").prop("checked", false); $("input[name='VIEW']:checkbox").parent('.normal').removeClass("checked"); $(this).prop("checked", true); $(this).parent('.normal').addClass('checked'); } else{ $("input[name='VIEW']").prop("checked", false); $("input[name='VIEW']").parent('.normal').removeClass('checked'); } }); simply you can use this
$("#chkAll").on("click",function(){ $("input[name=checkBoxName]").prop("checked",$(this).prop("checked")); }); jQuery("#checker").click(function(){ jQuery("#mydiv :checkbox").each(function(){ this.checked = true; }); }); jQuery("#dechecker").click(function(){ jQuery("#mydiv :checkbox").each(function(){ this.checked = false; }); }); jQuery("#checktoggler").click(function(){ jQuery("#mydiv :checkbox").each(function(){ this.checked = !this.checked; }); }); ;)
You can write like this also
$(function() { $("#checkbox-toggle").click(function() { $('input[type=checkbox][name=checkbox_id\\[\\]]').click(); }); }); Just need to call click event of check box when user click on button with id '#checkbox-toggle'.
A better approach and UX
$('.checkall').on('click', function() { var $checks = $('checks'); var $ckall = $(this); $.each($checks, function(){ $(this).prop("checked", $ckall.prop('checked')); }); }); $('checks').on('click', function(e){ $('.checkall').prop('checked', false); }); <table> <thead> <tr> <th><a> Select All </a></th> <th>#ID</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" name="order333"/></td> <td>{{ order.id }}</td> </tr> <tr> <td><input type="checkbox" name="order334"/></td> <td>{{ order.id }}</td> </tr> </tbody> </table> Try:
$(".table-datatable .select_all").on('click', function () { $("input[name^='order']").prop('checked', function (i, val) { return !val; }); }); This one works very well for me.
$("#checkall").click(function() { var fruits = $("input[name=fruits\\[\\]]"); fruits.prop("checked", $(this).prop("checked")); }); The most basic example would be:
// get DOM elements var checkbox = document.querySelector('input'), button = document.querySelector('button'); // bind "cilck" event on the button button.addEventListener('click', toggleCheckbox); // when clicking the button, toggle the checkbox function toggleCheckbox(){ checkbox.checked = !checkbox.checked; };<input type="checkbox"> <button>Toggle checkbox</button>This code will toggle the check box upon clicking any toggle switch animator used in web templates. Replace ".onoffswitch-label" as available in your code. "checkboxID" is the checkbox toggled here.
$('.onoffswitch-label').click(function () { if ($('#checkboxID').prop('checked')) { $('#checkboxID').prop('checked', false); } else { $('#checkboxID').prop('checked', true); } }); in my guess, the rightest man who suggested normal variant is GigolNet Gigolashvili, but i wanna suggest even more beautiful variant. Check it
$(document).on('click', '.fieldWrapper > label', function(event) { event.preventDefault() var n = $( event.target ).parent().find('input:checked').length var m = $( event.target ).parent().find('input').length x = n==m? false:true $( event.target ).parent().find('input').each(function (ind, el) { // $(el).attr('checked', 'checked'); this.checked = x }) }) Setting 'checked' or null instead of true or false respectively will do the work.
// checkbox selection var $chk=$(':checkbox'); $chk.prop('checked',$chk.is(':checked') ? null:'checked'); You could also toggle-checkboxes-on-off by doing the following. Currently using bootstrap toggle checkboxes.
<link href=' rel='stylesheet'> <script src=' <input type='checkbox' id='toggleScheduler' name='toggleScheduler' data-toggle='toggle' data-on='Enabled' data-off='Disabled' $("#toggleScheduler").bootstrapToggle('on'); // enable toggle checkbox $("#toggleScheduler").bootstrapToggle('off'); // disable toggle checkbox Well there is an easier way
First Give your checkboxes a class example 'id_chk'
Then inside the checkbox wich will control 'id_chk' checkboxes state put:
<input type='checkbox' onchange='js:jQuery(".id_chk").prop("checked", jQuery(this).prop("checked"))' />
Thats all, hope this helps
