Hoe kan een selectievakje worden aan-/uitgevinkt met JavaScript?

Antwoord 1, autoriteit 100%

Javascript:

// Check
document.getElementById("checkbox").checked = true;
// Uncheck
document.getElementById("checkbox").checked = false;

jQuery (1.6+):

// Check
$("#checkbox").prop("checked", true);
// Uncheck
$("#checkbox").prop("checked", false);

jQuery (1.5-):

// Check
$("#checkbox").attr("checked", true);
// Uncheck
$("#checkbox").attr("checked", false);

Antwoord 2, autoriteit 14%

Belangrijk gedrag dat nog niet is genoemd:

Programmatisch instellen van het aangevinkteattribuut, activeert niet de changegebeurtenis van het selectievakje.

Zie het zelf in deze viool:
http://jsfiddle.net/fjaeger/L9z9t04p/4/

(Fiddle getest in Chrome 46, Firefox 41 en IE 11)

De click()-methode< /h1>

Op een dag merk je misschien dat je code schrijft, die afhankelijk is van de gebeurtenis die wordt afgevuurd. Om ervoor te zorgen dat de gebeurtenis wordt geactiveerd, roept u de methode click()van het checkbox-element aan, als volgt:

document.getElementById('checkbox').click();

Dit schakelt echter de gecontroleerde status van het selectievakje in, in plaats van het specifiek in te stellen op trueof false. Onthoud dat de gebeurtenis changealleen moet worden geactiveerd als het aangevinkte attribuut daadwerkelijk verandert.

Het is ook van toepassing op de jQuery-manier: als u het kenmerk instelt met behulp van propof attr, wordt de gebeurtenis changeniet geactiveerd.

checkedinstellen op een specifieke waarde

U kunt het kenmerk checkedtesten voordat u de methode click()aanroept. Voorbeeld:

function toggle(checked) {
  var elm = document.getElementById('checkbox');
  if (checked != elm.checked) {
    elm.click();
  }
}

Lees hier meer over de klikmethode:
https://developer.mozilla.org/en-US/docs/Web/API/ HTMLElement/klik

Antwoord 3, autoriteit 3%

om te controleren:

document.getElementById("id-of-checkbox").checked = true;

om het vinkje weg te halen:

document.getElementById("id-of-checkbox").checked = false;

Antwoord 4, autoriteit 2%

We kunnen een selectievakje voor deeltjes aanvinken als,

$('id of the checkbox')[0].checked = true

en verwijder het vinkje door ,

$('id of the checkbox')[0].checked = false

Antwoord 5

Ik zou willen opmerken dat het instellen van het ‘checked’ attribuut op een niet-lege string leidt tot een aangevinkt vakje.

Dus als u het kenmerk ‘checked’ instelt op “false”, wordt het selectievakje aangevinkt. Ik moest de waarde instellen op de lege string, nullof de booleaanse waarde falseom er zeker van te zijn het selectievakje is niet aangevinkt.

Antwoord 6

Probeer dit:

//Check
document.getElementById('checkbox').setAttribute('checked', 'checked');
//UnCheck
document.getElementById('chk').removeAttribute('checked');

Antwoord 7

function setCheckboxValue(checkbox,value) {
    if (checkbox.checked!=value)
        checkbox.click();
}

Antwoord 8

<script type="text/javascript">
    $(document).ready(function () {
        $('.selecctall').click(function (event) {
            if (this.checked) {
                $('.checkbox1').each(function () {
                    this.checked = true;
                });
            } else {
                $('.checkbox1').each(function () {
                    this.checked = false;
                });
            }
        });
    });
</script>

Antwoord 9

Als u om de een of andere reden geen .click()op het checkbox-element, je kunt de waarde eenvoudig rechtstreeks wijzigen via de .checked-eigenschap (een IDL-kenmerkvan <input type="checkbox">).

Houd er rekening meedat dit niet de normaal gerelateerde gebeurtenis activeert (wijzig), dus je moet het handmatig activeren om een complete oplossing te hebben die werkt met alle gerelateerde event-handlers.

Hier is een functioneel voorbeeld in raw javascript (ES6):

class ButtonCheck {
  constructor() {
    let ourCheckBox = null;
    this.ourCheckBox = document.querySelector('#checkboxID');
    let checkBoxButton = null;
    this.checkBoxButton = document.querySelector('#checkboxID+button[aria-label="checkboxID"]');
    let checkEvent = new Event('change');
    this.checkBoxButton.addEventListener('click', function() {
      let checkBox = this.ourCheckBox;
      //toggle the checkbox: invert its state!
      checkBox.checked = !checkBox.checked;
      //let other things know the checkbox changed
      checkBox.dispatchEvent(checkEvent);
    }.bind(this), true);
    this.eventHandler = function(e) {
      document.querySelector('.checkboxfeedback').insertAdjacentHTML('beforeend', '<br />Event occurred on checkbox! Type: ' + e.type + ' checkbox state now: ' + this.ourCheckBox.checked);
    }
    //demonstration: we will see change events regardless of whether the checkbox is clicked or the button
    this.ourCheckBox.addEventListener('change', function(e) {
      this.eventHandler(e);
    }.bind(this), true);
    //demonstration: if we bind a click handler only to the checkbox, we only see clicks from the checkbox
    this.ourCheckBox.addEventListener('click', function(e) {
      this.eventHandler(e);
    }.bind(this), true);
  }
}
var init = function() {
  const checkIt = new ButtonCheck();
}
if (document.readyState != 'loading') {
  init;
} else {
  document.addEventListener('DOMContentLoaded', init);
}

<input type="checkbox" id="checkboxID" />
<button aria-label="checkboxID">Change the checkbox!</button>
<div class="checkboxfeedback">No changes yet!</div>

myCheckBox.checked=1

<input type="checkbox" id="myCheckBox"> Call to her

// check
$('#checkbox_id').click()

//for one element: 
document.querySelector('.myCheckBox').checked = true  //will select the first matched element
document.querySelector('.myCheckBox').checked = false//will unselect the first matched element
//for multiple elements:
for (const checkbox of document.querySelectorAll('.myCheckBox')) {
//iterating over all matched elements
checkbox.checked = true //for selection
checkbox.checked = false //for unselection
}

<?php
    if($serverVariable=="checked") 
        $checked = "checked";
    else
        $checked = "";
?>
<input type="checkbox"  name="deadline" value="yes" <?= $checked 
?> >
# on server
<?php
        if(isset($_POST['deadline']) and
             $_POST['deadline']=='yes')
             $serverVariable = checked;    
        else
             $serverVariable = "";  
?>