Checkbox onchange-Ereignis nicht auslösen.

Habe ich Folgendes setup: 2 Checkboxen, so dass, wenn die erste aktiviert ist, wechselt der Zustand des zweiten. Die zweite hat ein onchange-listener, der soll ein alert ausgelöst, wenn es änderungen.

Problem ist, wenn ich drauf klicke, wird das onchange ausgelöst wird, okay, aber wenn ich den ersten, es zu ändern ist-Zustand, wird das Ereignis nicht ausgelöst.

Bin ich ich etwas fehlt? oder ist das onchange-Ereignis im Grunde bedeutete, zu handeln wie ein onclick?

<!DOCTYPE html>
<html>
<body>

  <form action="">
    <input id='one' type="checkbox" name="vehicle" value="Bike">I have a bike<br>
    <input id='two' type="checkbox" name="vehicle" value="Car" checked>I have a car 
  </form>
  <script>
    function show(){
      alert(document.getElementById('two').checked);
    }

    document.getElementById('one').addEventListener('click', function(){
      var two = document.getElementById('two');
      two.checked = ! two.checked;
    });

    document.getElementById('two').addEventListener('change', function(){
      alert("changed");
    });
  </script>

</body>
</html>

Danke für die Hilfe 🙂

Ich kann mich irren, aber ich glaube nicht, dass programmgesteuert ändern einer checkbox feuert it-change-Ereignis.
Sie haben, um das Feuer das Ereignis manuell. Siehe stackoverflow.com/questions/2856513/...
Meine wirkliche Einstellung ist nicht so, ich arbeite mit einer Bibliothek namens switchery gibt stilvolle Checkboxen. Die Bibliothek verbirgt die eigentliche checkbox und schafft den Stil ein. aber das eigentliche Kontrollkästchen Staat noch aktualisiert, um widerzuspiegeln, dass der Stil ein. Also will ich das hören für change-events und update-angualr scope-Variablen, wie gebraucht.

InformationsquelleAutor T. Rex | 2015-05-27

4

Ändern Sie ein Attribut, dass nicht die Veranstaltung Feuer, können Sie entweder auslösen des change-Ereignisses, oder stattdessen klicken Sie die zweite checkbox.

Ändern versuchen:
```
document.getElementById('one').addEventListener('click', function(){
  var two = document.getElementById('two');
  two.checked = ! two.checked;
});
```
Zu:
```
document.getElementById('one').addEventListener('click', function(){
  document.getElementById('two').click()
});
```
Andere Lösung wäre, das auslösen des change-Ereignisses:
```
document.getElementById('one').addEventListener('click', function(){
  var two = document.getElementById('two');
  two.checked = ! two.checked;
  two.dispatchEvent('change');
});
```
- Kleine Korrektur auf die zweite Lösung (nach MDN): two.dispatchEvent(new Event('change'));
- stackoverflow.com/a/10159237/658035 auf einer microsoft-Webseite sagt Folgendes "Das onchange-Ereignis nicht ausgelöst, wenn die ausgewählte option für das select-Objekt programmgesteuert geändert wird." Ich bin nicht gekommen, über eine Erklärung, wie das anderswo ist, aber es scheint wahr zu sein, in mehreren Browsern und hieß am Anfang dieser Antwort.
InformationsquelleAutor taxicala

Wenn das Ziel ist, nur eine checkbox überprüft, hier ist ein jQuery-Lösung:

$(document).ready(function () {

    $('#one, #two').change(function (e) {
        if ($(this).prop('checked')) {
            $('#one, #two').not(this).prop('checked', false)
        }
    });

});

InformationsquelleAutor Ted

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.