Updating JavaScript function for multiple individual elements

Question

I wrote the following code for an example of standard checkboxes vs. ARIA checkboxes and included the CSS and JS in one file so it can be copied/pasted. I haven't written JS in a while and I got the function I want working by calling an element by its id. I have multiple elements and I'd like to update the function to work for each one. I know it's super easy but, as I said, I haven't written JS in some time. I have the following checkboxes written by including ARIA attributes to span elements.

<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>

Then I have the following JavaScript to toggle the aria-checked attribute and the image from unchecked to 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>

Clicking the image or label for Option A or Option B will toggle the class and image for Option A. This code currently works but what I can't remember and for the life of me can't figure out what to google is how to update this to account for each individual checkbox. I believe I need to create an array then reference the right point in the array but I don't recall how to accomplish that.

Answer 1

You need to pass through the target to the functions:

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

Then for the event, use the event target:

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

And once the target element is passed through you can get the child using 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");
    }
}