更新多个单独元素的JavaScript函数

Question

我为标准复选框与ARIA复选框的示例编写了以下代码，并将CSS和JS包含在一个文件中，以便可以复制/粘贴。我有一段时间没有写JS，我通过调用一个元素来获得我想要工作的函数。我有多个元素，我想更新函数为每个元素工作。我知道这很容易，但正如我所说，我在一段时间内没有写过JS。我通过包含ARIA属性编写以下复选框来跨越元素。

<fieldset> 
    <legend id="check_title">ARIA Checkboxes</legend> 
    <p>Checkboxes using ARIA and JavaScript:</p> 
    <div role="application"> 
     <div class="checkboxes" aria-labelledby="check_title"> 
     <!-- The "aria-labelledby" attribute is required because label elements can only be applied to form elements. --> 
     <!-- We are using span elements instead of default HTML checkbox inputs so aria-labelledby is needed for association. --> 
      <span role="checkbox" tabindex="0" aria-checked="false" aria-labelledby="labelA" id="optionA" onclick="toggleState();" onkeyup="ARIA_Checkbox_Key(event);"> 
       <img src="unchecked.png" alt="" role="presentation" id="imageA"> 
       <label id="labelA">Option A</label> 
      </span> 
      <br /> 
      <span role="checkbox" tabindex="0" aria-checked="false" aria-labelledby="labelB" id="optionB" onclick="toggleState();" onkeyup="ARIA_Checkbox_Key(event);"> 
       <img src="unchecked.png" alt="" role="presentation" id="imageB"> 
       <label id="labelB">Option B</label> 
      </span> 
     </div> 
    </div> 
</fieldset> 

然后我有以下JavaScript从未经检查的咏叹调-checked属性和图像切换到选中：

<script type="text/javascript"> 
// This function binds the event keycode 32 (space bar) to run the function toggleState 
// This is needed since the default functionality of a check box is triggered with the space bar 
function ARIA_Checkbox_Key(event) { 
    if(event.keyCode == 32) { 
     toggleState() 
    } 
} 

// This function gets the aria-checked attribute of an element. If it is false, it makes it true and vice versa. 
function toggleState() { 
    var getvalue=document.getElementById("optionA").getAttribute("aria-checked"); 
    if (getvalue=="false") { 
     document.getElementById("optionA").setAttribute("aria-checked", "true"); 
     document.getElementById("imageA").setAttribute("src", "checked.png"); 
    } else { 
     document.getElementById("optionA").setAttribute("aria-checked", "false"); 
     document.getElementById("imageA").setAttribute("src", "unchecked.png"); 
    } 
} 
</script> 

点击图像或标签选项A或方案B将切换类和选项A的图像。此代码目前的作品，但我不记得和我的生活无法找出谷歌是如何更新这个帐户为每个单独的复选框。我相信我需要创建一个数组，然后引用数组中的正确点，但我不记得如何实现这一点。

Answer 1

您需要通过目标传递给函数：

onclick="toggleState(this);" 
onkeyup="ARIA_Checkbox_Key(event);" 

然后该事件，利用事件目标：

function ARIA_Checkbox_Key(event) { 
    if (event.keyCode == 32) { 
     toggleState(event.target); 
    } 
} 

而且一旦目标元素是通过你传递可以得到孩子使用getElementsByTagName：

function toggleState(el) { 
    var img = el.getElementsByTagName('img')[0], 
     getvalue = el.getAttribute("aria-checked"); 

    if (getvalue == "false") { 
     console.log('toggleState', true); 
     el.setAttribute("aria-checked", "true"); 
     img.setAttribute("src", "checked.png"); 
    } else { 
     console.log('toggleState', false); 
     el.setAttribute("aria-checked", "false"); 
     img.setAttribute("src", "unchecked.png"); 
    } 
}