Question

I have a for loop that forms a list of check boxes based on information received from a mySQL database. Below is the for loop that forms the check boxes (unnecessary code removed).

for ($i = 1; $i <= count($descriptionIDsArray); $i++) {
    $statuses = mysql_fetch_assoc(mysql_query(sprintf("SELECT status, description FROM status_descriptions WHERE description_id='$i'")));
    $status = $statuses["status"]; ?>
    <input type="checkbox" value="<?php echo $status ?>" <?php if ($check == 1) {echo "checked='checked'";} ?> onchange="checkBox()" /><?php echo $description ?><br />
<?php } ?>

Checking or unchecking a box calls the following function:

<script type="text/javascript">
    function checkBox() {
        var status = $("input:checkbox").val();
        document.getElementById("test").innerHTML = status;
    }
</script>

The only value that I can get to appear in “test” is the value of the first check box. If I echo $status throughout the initial for loop all the values appear correctly so the problem seems to arise when the Javascript code is retrieving the corresponding value.

Answer 1

If you still want to keep the inline event handlers, change it to:

onclick="checkBox(this);"

And change the function to:

function checkBox(chk) {
    var status = chk.value;
    document.getElementById("test").innerHTML = status;
}

Note that onclick is better supported with checkboxes and radio buttons than is onchange. Also, the reason for this change I provided is because passing this to the checkBox function references the element that the click was applied to. That way, you know that inside of checkBox, the parameter chk will be the specific checkbox that just changed. Then just get the value with .value because it’s a simple DOM node.

Anyways, I’d suggest using jQuery to bind the click event. Something like:

$(document).ready(function () {
    $("input:checkbox").on("click", function () {
        var status = this.value;
        document.getElementById("test").innerHTML = status;
    });
});

But you can obviously use $(this).val() instead of this.value, but why bother? If you use jQuery to bind the events, just make sure you take out the onchange/onclick inline event handler in the HTML.

You can look at why to use input:checkbox and not just :checkbox as the jQuery selector here: http://api.jquery.com/checkbox-selector/