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> 

この結果、この

に今、私はそれは、ボタンを押すことによりチェックされている場合は、私の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 
    } 
});