Javascript checkbox onChange

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.

10 Answers

Pure javascript:

const checkbox = document.getElementById('myCheckbox') checkbox.addEventListener('change', (event) => { if (event.currentTarget.checked) { alert('checked'); } else { alert('not checked'); } })

My Checkbox: <input type="checkbox" />

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

HTML

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

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(); } }); 

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

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 } }); 

HTML:

<input type="checkbox" onchange="handleChange(event)"> 

JS:

function handleChange(e) { const {checked} = e.target; } 

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 } }; 

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.

<!-- Begin Loop--> <tr> <td><?=$criteria?></td> <td><?=$indicator?></td> <td><?=$target?></td> <td> <div> <input type="checkbox" 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 a button below the table with a hidden input:

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

You can write your script like so:

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

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 type="checkbox" onclick="onToggle()">

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 type="number" value=5 /> Other: <input type="number" value=7 />