Javascript onChange checkbox

Question

I have a checkbox in the form, and I would like it to work according to the following scenario:

• if someone checks this, the value of textual totalCost ( totalCost ) should be set to 10 .
• then, if I go back and clear the check box, the totalCost calculate() function sets the value of totalCost according to other parameters in the form.

In general, I need a part in which, when I check, I do one thing, and when I uncheck, I do another.

Answer 1

 function calc() { if (document.getElementById('xxx').checked) { document.getElementById('totalCost').value = 10; } else { calculate(); } } 

HTML

 <input type="checkbox" id="xxx" name="xxx" onclick="calc();"/> 

Answer 2

Pure JavaScript:

 const checkbox = document.getElementById('myCheckbox') checkbox.addEventListener('change', (event) => { if (event.target.checked) { console.log('checked') } else { console.log('not checked') } }) 

HTML:

 <input id="myCheckbox" type="checkbox" /> 

jsfiddle:

https://jsfiddle.net/pfcymb4j/1/

Answer 3

If you are using jQuery, then I can suggest the following: NOTE. I made some assumptions here.

 $('#my_checkbox').click(function(){ if($(this).is(':checked')){ $('input[name="totalCost"]').val(10); } else { calculate(); } }); 

Answer 4

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

Answer 5

The following solution uses jquery. Suppose you have a checkbox with the id checkboxId .

 const checkbox = $("#checkboxId"); checkbox.change(function(event) { var checkbox = event.target; if (checkbox.checked) { //Checkbox has been checked } else { //Checkbox has been unchecked } }); 

Answer 6

Check the box with its identifier, not C # Assign the function to the onclick attribute, not use 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 } }; 

Answer 7

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

<input id="my-checkbox" type="checkbox" onclick="onToggle()">

Answer 8

try

 totalCost.value = checkbox.checked ? 10 : calculate(); 

 function change(checkbox) { totalCost.value = checkbox.checked ? 10 : calculate(); } function calculate() { return other.value*2; } 

 input { display: block} 

 Checkbox: <input type="checkbox" onclick="change(this)"/> Total cost: <input id="totalCost" type="number" value=5 /> Other: <input id="other" type="number" value=7 /> 

Answer 9

I know this sounds like a Nubian answer, but I am posting 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 flags at the end.

 <!-- Begin Loop--> <tr> <td><?=$criteria?></td> <td><?=$indicator?></td> <td><?=$target?></td> <td> <div class="form-check"> <input type="checkbox" class="form-check-input" name="active" value="<?=$id?>" <?=$status?'checked':''?>> <!-- mark as 'checked' if checkbox was selected on a previous save --> </div> </td> </tr> <!-- End of Loop --> 

You place the button under the table with hidden input:

 <form method="post" action="/goalobj-review" id="goalobj"> <!-- we retrieve saved checkboxes & concatenate them into a string separated by commas.ie $saved_data = "1,2,3"; --> <input type="hidden" name="result" id="selected" value="<?= $saved_data ?>> <button type="submit" class="btn btn-info" form="goalobj">Submit Changes</button> </form> 

You can write your script like this:

 <script type="text/javascript"> var checkboxes = document.getElementsByClassName('form-check-input'); var i; var tid = setInterval(function () { if (document.readyState !== "complete") { return; } clearInterval(tid); for(i=0;i<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 > 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; } } </script> 

The identifiers of your flags will be presented as a string "1,2" in the result variable. Then you can break it down at the controller level as you want.