Überprüfen Sie, ob Li in MDL-Liste

Question

überprüft Ich arbeite mit MDL (Material Design Lite) und ich erstellte eine Checkliste mit diesem HTML-Code.

<li class="mdl-list__item"> 
    <span class="mdl-list__item-primary-content"> 
     <i class="material-icons mdl-list__item-avatar">person</i> 
     Bryan Cranston 
    </span> 
    <span class="mdl-list__item-secondary-action"> 
     <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="list-checkbox-1"> 
     <input type="checkbox" id="list-checkbox-1" class="mdl-checkbox__input" checked /> 
     </label> 
    </span> 
    </li> 

Dieses Ergebnis in diesem

Jetzt möchte ich die Bryan Cranston meiner Feuerbasis Datenbank speichern, wenn es durch Drücken einer Taste aktiviert ist, aber ich weiß nicht, wie zu steuern, wenn es ist überprüft oder nicht. Ich kann es tun manuell

addFriendButton.addEventListener('click', function (event) { 
    firebase.auth().onAuthStateChanged(function (user) { 
     if (user) { 
      var username = (should be "Bryan Cranston") 
      var ref = firebase.database().ref("friends").child(user.uid).child(username).set(true); 
     } 
    }); 
}); 

Vielen Dank im Voraus!

Answer 1

Die einfachste Sache, die Sie tun können, ist das Attribut checked aus dem Kontrollkästchen Element abrufen. Dieses Element ist ein Boolescher Wert, true, wenn es aktiviert ist, und false, wenn nicht. Wenn Sie also auf die Schaltfläche klicken, können Sie das Element abrufen und prüfen, ob es wie folgt markiert ist:

addFriendButton.addEventListener('click', function(event) { 
    ... 
    if(document.getElementById('list-checkbox-1').checked) { 
     // add him to the database 
    } 
});