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.

Solution 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();"/>

Solution 2:

Pure javascript:

const checkbox = document.getElementById('myCheckbox')

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

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

Solution 3:

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