Case à cocher Javascript onChange

Question

J'ai une case à cocher dans un formulaire et j'aimerais qu'elle fonctionne selon le scénario suivant :

• si quelqu'un le vérifie, la valeur d'un champ de texte ( totalCost ) doit être fixé à 10 .
• puis, si je reviens en arrière et que je décoche, une fonction calculate() fixe la valeur de totalCost en fonction d'autres paramètres du formulaire.

J'ai donc besoin de la partie où, lorsque je coche la case, je fais une chose et lorsque je la décoche, j'en fais une autre.

Answer 1

Javascript pur :

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" />

Answer 2

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 3

Si vous utilisez jQuery alors je peux vous suggérer ce qui suit : NOTE : J'ai fait quelques suppositions ici

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

Answer 4

Utilisez un événement onclick, car chaque clic sur une case à cocher la modifie réellement.

Answer 5

HTML :

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

JS :

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