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

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

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

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

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

Check if li is checked in mdl list

javascript

firebase-realtime-database

html-lists

material-design-lite