Javascript-aanvinkvakje bij Wijzigen

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

Antwoord 3, autoriteit 17%

Als je jQuery gebruikt.. dan kan ik je het volgende voorstellen:
OPMERKING: ik heb hier een aanname gemaakt

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

Antwoord 4, autoriteit 11%

Gebruik een onclick-gebeurtenis, want elke klik op een selectievakje verandert deze daadwerkelijk.

Antwoord 5, autoriteit 10%

De volgende oplossing maakt gebruik van jQuery. Laten we aannemen dat je een selectievakje hebt met de ID van checkboxId.

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

Antwoord 6, autoriteit 6%

HTML:

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

JS:

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

Antwoord 7, autoriteit 2%

Verwijs naar het selectievakje met zijn id en niet met de #
Wijs de functie toe aan het attribuut onclick in plaats van het kenmerk change te gebruiken

var checkbox = $("save_" + fieldName);
checkbox.onclick = function(event) {
    var checkbox = event.target;
    if (checkbox.checked) {
        //Checkbox has been checked
    } else {
        //Checkbox has been unchecked
    }
};

Antwoord 8

Ik weet dat dit een noob antwoord lijkt, maar ik plaats het hier zodat het anderen in de toekomst kan helpen.

Stel dat je een tabel bouwt met een foreach-lus. En tegelijkertijd aan het einde selectievakjes toevoegen.

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

U plaatst een knop onder de tabel met een verborgen invoer:

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

Je kunt je script als volgt schrijven:

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

De ID’s van uw selectievakjes worden ingediend als een tekenreeks “1,2” binnen de resulterende variabele. U kunt het vervolgens op het niveau van de controller breken.

Antwoord 9

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

Antwoord 10

Probeer

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