Javascript checkbox onChange

Question

I have a checkbox in a form and I d like it to work according to following scenario     if someone checks it  the value of a textfield  totalCost  should be set to 10   then  if I go back and uncheck it  a function calculate   sets the value of totalCost according to other parameters in the form     So basically  I need the part where  when I check the checkbox I do one thing and when I uncheck it  I do another

User · Answer

Use an onclick event  because every click on a checkbox actually changes it

User · Answer

HTML    lt input type  checkbox  onchange  handleChange event   gt    JS   function handleChange e         const  checked    e target

User · Answer

function calc       if  document getElementById  xxx   checked             document getElementById  totalCost   value   10      else         calculate            HTML   lt input type  checkbox  id  xxx  name  xxx  onclick  calc      gt

User · Answer

try  totalCost value   checkbox checked   10   calculate       x000D   x000D  function change checkbox    x000D    totalCost value   checkbox checked   10   calculate    x000D    x000D   x000D  function calculate     x000D    return other value 2  x000D    x000D  input   display  block  x000D  Checkbox   lt input type  checkbox  onclick  change this    gt  x000D  Total cost   lt input id  totalCost  type  number  value 5   gt  x000D  Other   lt input id  other  type  number  value 7   gt  x000D   x000D   x000D

User · Answer

I know this seems like noob answer but I m putting it here so that it can help others in the future    Suppose you are building a table with a foreach loop  And at the same time adding checkboxes at the end    lt  -- Begin Loop-- gt   lt tr gt    lt td gt  lt    criteria  gt  lt  td gt    lt td gt  lt    indicator  gt  lt  td gt    lt td gt  lt    target  gt  lt  td gt    lt td gt      lt div class  form-check  gt       lt input type  checkbox  class  form-check-input  name  active  value   lt    id  gt    lt    status  checked      gt  gt    lt  -- mark as  checked  if checkbox was selected on a previous save -- gt      lt  div gt    lt  td gt   lt  tr gt   lt  -- End of Loop -- gt    You place a button below the table with a hidden input    lt form method  post  action   goalobj-review  id  goalobj  gt     lt  -- we retrieve saved checkboxes  amp  concatenate them into a string separated by commas i e   saved data    1 2 3   -- gt     lt input type  hidden  name  result  id  selected  value   lt     saved data   gt  gt    lt button type  submit  class  btn btn-info  form  goalobj  gt Submit Changes lt  button gt   lt  form gt    You can write your script like so    lt script type  text javascript  gt      var checkboxes   document getElementsByClassName  form-check-input        var i      var tid   setInterval function              if  document readyState      complete                 return                    clearInterval tid       for i 0 i lt checkboxes length i             checkboxes i  addEventListener  click  checkBoxValue               100        function checkBoxValue event            var selected   document querySelector  input id selected             var result   0          if this checked                 if selected value length  gt  0                    result   selected value         this value                  document querySelector  input id selected    value   result                else                   result   this value                  document querySelector  input id selected    value   result                                  if   this checked         trigger if unchecked  if checkbox is marked as  checked  from a previous saved is deselected  this will also remove its corresponding value from our hidden input               var compact   selected value split          split string into array             var index   compact indexOf this value      return index of our selected checkbox             compact splice index 1      removes 1 item at specified index             var newValue   compact join         returns a new string             document querySelector  input id selected    value   newValue                    lt  script gt    The ids of your checkboxes will be submitted as a string  1 2  within the result variable  You can then break it up at the controller level however you want

User · Answer

Reference the checkbox by it s id and not with the   Assign the function to the onclick attribute rather than using the change attribute  var checkbox      save     fieldName   checkbox onclick   function event        var checkbox   event target       if  checkbox checked              Checkbox has been checked       else             Checkbox has been unchecked

User · Answer

The following solution makes use of jquery  Let s assume you have a checkbox with id of checkboxId   const checkbox       checkboxId     checkbox change function event        var checkbox   event target      if  checkbox checked              Checkbox has been checked       else             Checkbox has been unchecked

User · Answer

Javascript        on toggle method      to check status of checkbox   function onToggle            check if checkbox is checked     if  document querySelector   my-checkbox   checked             if checked       console log  checked          else            if unchecked       console log  unchecked                HTML   lt input id  my-checkbox  type  checkbox  onclick  onToggle    gt

User · Answer

Pure javascript   x000D   x000D  const checkbox   document getElementById  myCheckbox    checkbox addEventListener  change    event    gt      if  event currentTarget checked        alert  checked        else       alert  not checked           x000D  My Checkbox   lt input id  myCheckbox  type  checkbox    gt  x000D   x000D   x000D

User · Answer

If you are using jQuery   then I can suggest the following   NOTE  I made some assumption here      my checkbox   click function        if   this  is   checked                input name  totalCost     val 10         else           calculate

[javascript] Javascript checkbox onChange

Examples related to javascript

Examples related to checkbox