Kontrollkästchen Javascript onChange

Ich habe ein Kontrollkästchen in einem Formular und möchte, dass es gemäß dem folgenden Szenario funktioniert:

• Wenn jemand dies überprüft, sollte der Wert eines Textfelds ( totalCost) auf gesetzt werden 10.
• Wenn ich dann zurück gehe und das Kontrollkästchen deaktiviere, setzt eine Funktion calculate()den Wert von totalCostgemäß anderen Parametern im Formular.

Im Grunde brauche ich den Teil, in dem ich, wenn ich das Kontrollkästchen aktiviere, eine Sache mache und wenn ich es deaktiviere, mache ich eine andere.

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

HTML

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

Reines Javascript:

const checkbox = document.getElementById('myCheckbox')

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

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

Wenn Sie jQuery verwenden, kann ich Folgendes vorschlagen: HINWEIS: Ich habe hier einige Annahmen getroffen

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

Verwenden Sie ein Onclick-Ereignis, da es durch jeden Klick auf ein Kontrollkästchen tatsächlich geändert wird.

Die folgende Lösung verwendet jquery. Nehmen wir an, Sie haben ein Kontrollkästchen mit der ID von 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;
}

Verweisen Sie auf das Kontrollkästchen anhand seiner ID und nicht mit dem # Weisen Sie die Funktion dem onclick-Attribut zu, anstatt das change-Attribut zu verwenden

var checkbox = $("save_" + fieldName);
checkbox.onclick = function(event) {
    var checkbox = event.target;

    if (checkbox.checked) {
        //Checkbox has been checked
    } else {
        //Checkbox has been unchecked
    }
};

Ich weiß, dass dies wie eine Noob-Antwort erscheint, aber ich setze sie hier ein, damit sie anderen in Zukunft helfen kann.

Angenommen, Sie erstellen eine Tabelle mit einer foreach-Schleife. Gleichzeitig werden am Ende Kontrollkästchen hinzugefügt.

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

Sie platzieren eine Schaltfläche unter der Tabelle mit einer versteckten Eingabe:

<form method="post" action="/goalobj-review" id="goalobj">

 <!-- we retrieve saved checkboxes & concatenate them into a string separated by commas.i.e. $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>

Sie können Ihr Skript folgendermaßen schreiben:

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

Die IDs Ihrer Kontrollkästchen werden als Zeichenfolge "1,2" innerhalb der Ergebnisvariablen übergeben. Sie können es dann auf Controller-Ebene aufteilen, wie Sie möchten.

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()">

Versuchen

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