Javascript function only outputs value of first check box from a PHP for loop

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.

What value are you trying to get? The value of the most recently checked box? — Michael Berkowski
– Michael Berkowski, Commented Oct 30, 2012 at 18:40

Ian · Accepted Answer · 2012-10-30 19:01:31Z

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/

Wally Lawless · Accepted Answer · 2012-10-30 19:49:53Z

1

When you do

$('input:checkbox').val();

it is returning the first input of type checkbox on your form, not necessarily the one that is clicked.

To return the one that was actually clicked, you need to do something like this:

$(document).ready(function() {
    $('input:checkbox').bind('click', function() {
        clickBox($(this));
    });
});

function clickBox(field) {
    $('#test').html(field.val());
}

edited Oct 30, 2012 at 19:49

answered Oct 30, 2012 at 18:42

Wally Lawless

7,5777 gold badges41 silver badges55 bronze badges

2 Comments

Ian Over a year ago

There's no reason to wrap field with $() as you already pass a jQuery object from the click handler. Should be able to just use field.val()

Wally Lawless Over a year ago

Yup, you're right, I've updated the answer. Thanks for the feedback.

abuduba · Accepted Answer · 2012-10-30 18:55:55Z

0

if you use a jquery, why bother with inline events?

You could write that like:

$(':checkbox').change( function(){

      $('#test').html( $(this).val() );
      //`this` is the checkbox was changed 

     //for check if item is checked try:

       $(this).is(':checked') // boolean
});

If you pass that code before your checkboxes are placed make sure you invoke that code when document is loaded;

$( function(){ 
   //code from above here
});

jQuery is well documented with lots of samples. I think you'll like it docs.jquery.com

answered Oct 30, 2012 at 18:55

abuduba

5,0637 gold badges29 silver badges43 bronze badges

Collectives™ on Stack Overflow

Javascript function only outputs value of first check box from a PHP for loop

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related