检查是否在mdl列表中选中了li

Question

我使用MDL（Material Design Lite），并使用此HTML代码创建了一个清单。

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

此结果

现在我想将Bryan Cranston保存到我的firebase数据库中，如果通过按下按钮来检查它但我不知道如何控制它是否被检查。 我可以手动完成

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);
        }
    });
});

提前谢谢！

Answer 1

您可以做的最简单的事情是从checkbox元素中检索checked属性。此元素是布尔值，如果选中则为true，否则为false。因此，无论何时单击该按钮，您都可以检索该元素并检查它是否如此检查：

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