Question

我编写了以下代码，用于标准复选框与ARIA复选框的示例，并将CSS和JS包含在一个文件中，以便可以复制/粘贴。我有一段时间没有写JS，我通过id调用一个元素来获得我想要的函数。我有多个元素，我想更新函数以便为每个元素工作。我知道这很容易，但正如我所说，我有一段时间没有写过JS。我通过在span元素中包含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来切换aria-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");
    }
}

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

1 个答案: