は、各要素に関数を取り付ける正しい方法です

Question

各要素に関数をアタッチするのは正しい方法ですか？そして、私の機能は大丈夫ですか？

<ul id='forShopping'> 
        <li><input class='ch' type='checkbox' onclick='isActive()'> Air-freshener</input></li> 
        <li><input class='ch' type='checkbox' onclick='isActive()'> Pampers</input></li> 
        <li><input class='ch' type='checkbox' onclick='isActive()'> Newspapper</input></li> 
        <li><input class='ch' type='checkbox' onclick='isActive()'> Toilet paper</input></li> 
</ul> 

function isActive() { 
    let elem = document.getElementsByTagName('input'); 
    for(let i=0; i<elem.length; i++){ 
     if(elem[i].checked == true){ 
      elem[i].parentNode.style.backgroundColor = 'forestGreen'; 
     }else{ 
      elem[i].parentNode.style.backgroundColor = 'white'; 
     } 
    } 
} 

このように動作しますが、正しくはわかりません。

Answer 1

あなたのコードは動作しますが、すべてにDOM、それを通じて&意志ループから特定のタグを持つから要素を取得する必要があり、それをクリックして以来、まだそれは、コストのかかるプロセスになりますけれども。代わりに、このコンテキストを関数に渡します。

希望このスニペットは

JS

function isActive(elem) { 
if (elem.checked == true) { 
    elem.parentNode.style.backgroundColor = 'forestGreen'; 
    } else { 
    elem.parentNode.style.backgroundColor = 'white'; 
    } 

} 

HTML

<ul id='forShopping'> 
    <li> 
    <input class='ch' type='checkbox' onclick='isActive(this)'> Air-freshener></li> 
    <li> 
    <input class='ch' type='checkbox' onclick='isActive(this)'> Pampers></li> 
    <li> 
    <input class='ch' type='checkbox' onclick='isActive(this)'> Newspapper></li> 
    <li> 
    <input class='ch' type='checkbox' onclick='isActive(this)'> Toilet paper></li> 
</ul> 

JSFIDDLE

Answer 2

function isActive (a) { 
 
     if(a.checked == true) 
 
     a.parentNode.style.backgroundColor = 'forestGreen'; 
 
     else 
 
      a.parentNode.style.backgroundColor = 'white'; 
 
}

<ul id='forShopping'> 
 
        <li><input class='ch' type='checkbox' onclick='isActive(this)'> Air-freshener</input></li> 
 
        <li><input class='ch' type='checkbox' onclick='isActive(this)'> Pampers</input></li> 
 
        <li><input class='ch' type='checkbox' onclick='isActive(this)'> Newspapper</input></li> 
 
        <li><input class='ch' type='checkbox' onclick='isActive(this)'> Toilet paper</input></li> 
 
</ul>

Answer 3

使用CSSの擬似C有用であろうlass :checked（これはjsの必要はありません）。

例

label { 
 
    display: inline-block; 
 
} 
 
.ch:checked + label { 
 
    background: red; 
 
}

<ul id='forShopping'> 
 
    <li> 
 
    <input class='ch' type='checkbox' /> 
 
    <label>Air-freshener</label> 
 
    </li> 
 
    <li> 
 
    <input class='ch' type='checkbox'> 
 
    <label>Pampers</label> 
 
    </li> 
 
    <li> 
 
    <input class='ch' type='checkbox'> 
 
    <label>Newspapper</label> 
 
    </li> 
 
    <li> 
 
    <input class='ch' type='checkbox'> 
 
    <label>Toilet paper</label> 
 
    </li> 
 
</ul>