Toggle Checkboxes on off

Question

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

User · Answer

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

User · Answer

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  gt  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

User · Answer

this toggles the checkbox  and fires its event if it has         input type checkbox    trigger  click       or    input type checkbox    click

User · Answer

The most basic example would be   x000D   x000D     get DOM elements x000D  var checkbox   document querySelector  input    x000D      button   document querySelector  button    x000D   x000D     bind  cilck  event on the button x000D  button addEventListener  click   toggleCheckbox   x000D   x000D     when clicking the button  toggle the checkbox x000D  function toggleCheckbox    x000D    checkbox checked    checkbox checked  x000D     x000D   lt input type  checkbox  gt  x000D   lt button gt Toggle checkbox lt  button gt  x000D   x000D   x000D

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Assuming that it s an image that has to toggle the checkbox  this works for me   lt img src  something gif  onclick      checkboxid   prop  checked         checkboxid   is   checked       gt   lt input type  checkbox  id  checkboxid  gt

User · Answer

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

User · Answer

Here is a jQuery way to toggle checkboxes without having to select a checkbox with html5  amp  labels        lt div class  checkbox-list margin-auto  gt       lt label class    gt Compare to Last Year lt  label gt  lt br gt       lt label class  normal  for  01  gt          lt input id  01  type  checkbox  name  VIEW  value  01  gt  Retail units      lt  label gt       lt label class  normal  for  02  gt             lt input id  02  type  checkbox  name  VIEW  value  02  gt   Retail Dollars      lt  label gt       lt label class  normal  for  03  gt             lt input id  03  type  checkbox  name  VIEW  value  03  gt   GP Dollars      lt  label gt       lt label class  normal  for  04  gt             lt input id  04  type  checkbox  name  VIEW  value  04  gt   GP Percent      lt  label gt   lt  div gt        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                    http   www bootply com A4h6kAPshx

User · Answer

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

User · Answer

This one works very well for me          checkall   click function            var fruits      input name fruits                   fruits prop  checked     this  prop  checked

User · Answer

simply you can use this      chkAll   on  click  function           input name checkBoxName    prop  checked    this  prop  checked

User · Answer

I think it s simpler to just trigger a click       select-all-teammembers   click function            input name recipients          trigger  click

User · Answer

Use this plugin       fn toggleCheck   function            if this tagName      INPUT                  this  prop  checked       this  is   checked                       Then       myCheckBox   toggleCheck

User · Answer

lt table class  table table-datatable table-bordered table-condensed table-striped table-hover table-responsive  gt   lt thead gt       lt tr gt           lt th class  col-xs-1  gt  lt a class  select all btn btn-xs btn-info  gt  Select All  lt  a gt  lt  th gt           lt th class  col-xs-2  gt  ID lt  th gt       lt  tr gt   lt  thead gt   lt tbody gt       lt tr gt           lt td gt  lt input type  checkbox  name  order333   gt  lt  td gt           lt td gt    order id    lt  td gt       lt  tr gt       lt tr gt           lt td gt  lt input type  checkbox  name  order334   gt  lt  td gt           lt td gt    order id    lt  td gt       lt  tr gt   lt  tbody gt                     lt  table gt    Try       table-datatable  select all   on  click   function             input name   order     prop  checked   function  i  val            return  val

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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    lt input onchange  toggleAll this   gt  function toggleAll sender            checkBoxes   prop  checked   sender checked

User · Answer

Here is another way that you want     document  ready function               checkp   toggle          function                       check   attr  Checked   Checked                        function                       check   removeAttr  Checked

User · Answer

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    lt input type  checkbox  onchange  js jQuery   id chk   prop  checked   jQuery this  prop  checked       gt    Thats all  hope this helps

User · Answer

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

[jquery] Toggle Checkboxes on/off

Examples related to jquery

Examples related to checkbox

Examples related to jquery-selectors

Examples related to toggle