すべてのチェックボックスに一意のIDをどのように割り当てるのですか？

Question

チェックボックスがオンになっているかどうかを確認しようとしています。しかし、私が直面している問題は、XMLに応じて自動的にチェックボックスを生成するためにループ（xsl：for each）を使用したことです。私はそれらを自動生成しているので、すべてのチェックボックスに対して異なるIDを設定することはできません。チェックされていることを示すために、特定のチェックボックスの属性を更新できません。さらに、チェックボックスをチェック（最初または最後のチェックボックス）すると、最初のチェックボックスが更新されます。誰かが私に提案をしてくれますか？少なくとも私を正しい方向に向ける？前もって感謝します。ここで

は私のXSLTコードは次のとおりです。ここで

<xsl:if test="$type='MultiList'"> 
      <xsl:for-each select="./options/item"> 
      <xsl:element name="input"> 
       <xsl:attribute name="type">checkbox</xsl:attribute> 
       <xsl:attribute name="id">hey</xsl:attribute> 
       <xsl:attribute name="onchange">hii()</xsl:attribute> 
       <xsl:attribute name="score"> 
       <xsl:value-of select="@score"/> 
       </xsl:attribute> 
       <xsl:attribute name="value"> 
       <xsl:value-of select="item"/> 
       </xsl:attribute> 

      </xsl:element> 
      <label> 
       <xsl:value-of select="."/> 
      </label> 
      </xsl:for-each> 
     </xsl:if> 

はjavascriptのです：

<script> 


    function hii(){ 

    var a = document.getElementById('hey'); 
    a.setAttribute("score","1"); 
    } 
    </script> 

Answer 1

あなたは、すべてのチェックボックスのIDを必要としません。

変更関数定義パラメータ受け入れる：

function hii(checkbox) { 
    checkbox.setAttribute("score", (checkbox.checked ? 1 : 0)); 
} 

をそしてhii()にthisを渡す：

<xsl:attribute name="onchange">hii(this)</xsl:attribute> 

またはすべてでonclick属性を削除するに取り付けられているクリックハンドラを使用しますチェックボックスの親要素。

例：

var parent = document.querySelector("div"); 
 
parent.addEventListener("click", function(e) { 
 
    if (e.target.nodeName !== "INPUT") { 
 
    return; 
 
    } 
 
    
 
    e.target.setAttribute("score", e.target.checked ? 1 : 0); 
 
});

<div> 
 
    <input type="checkbox" name="cb1" /> 
 
    <input type="checkbox" name="cb2" /> 
 
    <input type="checkbox" name="cb3" /> 
 
</div>