webentwicklung-frage-antwort-db.com.de

durchführen einer Aktion bei einem Kontrollkästchen mit aktiviertem oder nicht abgehaktem Ereignis im HTML-Formular

Ich habe ein Kontrollkästchen in einem Formular, das standardmäßig deaktiviert ist. Jetzt möchte ich zwei getrennte Aktionen für den aktivierten und nicht aktivierten Status dieses Kontrollkästchens ausführen.

das ist meine Checkbox:

<form>
    syn<input type="checkbox" name="checkfield" id="g01-01"  onchange="doalert(this.id)"/>
</form>

und das ist mein Skript:

function doalert(id){
  if(this.checked) {
     alert('checked');
  }else{
     alert('unchecked');
  }
}

es gibt nur Warnungen ungeteilt !! Was ist der beste Weg, das zu tun.

14
shekoufeh

Wir können dies mit JavaScript tun, es ist keine jQuery erforderlich. Übergeben Sie einfach das geänderte Element und lassen Sie es von JavaScript verarbeiten.

HTML

<form id="myform">
    syn<input type="checkbox" name="checkfield" id="g01-01"  onchange="doalert(this)"/>
</form>

JS

function doalert(checkboxElem) {
  if (checkboxElem.checked) {
    alert ("hi");
  } else {
    alert ("bye");
  }
}

Demo hier 

36
Shrinivas Pai
<form>
    syn<input type="checkbox" name="checkfield" id="g01-01" />
</form>

js:

$('#g01-01').on('change',function(){
    var _val = $(this).is(':checked') ? 'checked' : 'unchecked';
    alert(_val);
});
3
guvenckardas

Das Problem ist, wie Sie den Listener angehängt haben:

<input type="checkbox" ...  onchange="doalert(this.id)">

Inline-Listener werden effektiv in eine Funktion eingeschlossen, die mit dem Element als this aufgerufen wird. Diese Funktion ruft dann die Funktion doalert auf, setzt jedoch nicht deren this , so dass standardmäßig das globale Objekt (Fenster in einem Browser) verwendet wird.

Da das Fensterobjekt keine checked -Eigenschaft hat, wird this.checked immer in false aufgelöst.

Wenn Sie möchten, dass this within doalert das Element ist, hängen Sie den Listener mit addEventListener an:

window.onload = function() {
  var input = document.querySelector('#g01-01');
  if (input) {   
    input.addEventListener('change', doalert, false);
  }
}

Oder wenn Sie einen Inline-Listener verwenden möchten:

<input type="checkbox" ...  onchange="doalert.call(this, this.id)">
2
RobG

Haben Sie versucht, das Änderungsereignis JQuery zu verwenden?

$("#g01-01").change(function() {
    if(this.checked) {
        //Do stuff
    }
});

Dann können Sie auch onchange="doalert(this.id)" aus Ihrer Checkbox entfernen :)

Bearbeiten:

Ich weiß nicht, ob Sie JQuery verwenden, aber wenn Sie es noch nicht verwenden, müssen Sie das folgende Skript in Ihre Seite einfügen, damit Sie es verwenden können:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
1
Reece Kenney

Wenn Sie JQuery verwenden, können Sie wie folgt vorgehen:

HTML

<form id="myform">
    syn<input type="checkbox" name="checkfield" id="g01-01"  onclick="doalert()"/>
</form>

JS

function doalert() {
  if ($("#g01-01").is(":checked")) {
    alert ("hi");
  } else {
    alert ("bye");
  }
}
1
Bhavesh Gohel

Wenn Sie Ihren Code mit Entwicklertools debuggen, werden Sie feststellen, dass this auf das Fensterobjekt und nicht auf das Eingabesteuerelement verweist. Erwägen Sie die Verwendung der übergebenen ID, um die Eingabe abzurufen, und prüfen Sie, ob der Wert checked vorhanden ist. 

function doalert(id){
  if(document.getElementById(id).checked) {
    alert('checked');
  }else{
    alert('unchecked');
  }
}
0
Asad Palekar