Onchange or onclick for checkboxes and checkbox value

[ofeyofey]

Hi,
I have an array of checkboxes group into class=‘year’. I would like to call a function in JS when a checkbox is checked.

The html is,

<table class="inner" id="searchTable">
                                         <search>Exam Type:<th>                        
                                                    <?php 
                                                        foreach($exams as $key=>$value):
                                                               
                                                               echo "<tr><td class='left'><input type='checkbox' class='year' id='$key' name='$key' value='$value'
                                                           
                                                            if ($category['selected'])
                                                            {
                                                            echo ' checked';
                                                            }
                                                            
                                                            > $value</td></tr>";
                                                          endforeach; ?>
                                     </table>

This table is inside a form. but I am too worried about the form at the moment.

The JS should create a table with a row when any checkbox is checked.

function yearTable(){
    var table = document.getElementById("searchYear");
    var row = document.createElement("tr");    
    var cell = document.createElement("td");
    var empty = document.createTextNode("year.value");
    /*var empty = document.createTextNode("");*/
    cell.appendChild(empty);
    row.appendChild(cell);
    table.appendChild(row); 
}

document.getElementByClassName('year').onchange = yearTable; 

I have tried using .onchange and .onclick but neither do anything when a box is checked.
Also I need to value checked in the JS.
I tried year.value but that doesn’t work. Prviously I has a select options menu with id = ‘exam’ and I was able to get the value using exam.value but I can’t figure out how to do soemthing equivalent for these checkboxes.
Any help would be greatly appreciated.
Thanks

[megazoid]

When it was a <select> list you had to deal with one element.
Now you have group of elements and this should be taken in account.

This line finds first element with class “year”, not all of them:

document.getElementByClassName('year').onchange = yearTable;

Use getElementsByClassName (note the plural) instead:

var checkboxes = document.getElementsByClassName('year');

that function will return all elements with class and you can iterate through them:

for(var index in checkboxes){
    //bind event to each checkbox
    checkboxes[index].onchange = yearTable;
}

Inside yearTable() function you can access changed checkbox with this object:

function yearTable(){

    var year = this.value; 

    if (this.checked){
       //do whatever you want when checkbox is checked   
    }

}

[ofeyofey]

Brilliant thanks for this answer, exactly what I needed. I could have been another week working on this before I would cop the missing ‘s’. And I would not have known to use the this.value

This is what i have now,

function yearTable(){
    var year = this.value; 

    var table = document.getElementById("searchYear");
    var row = document.createElement("tr");    
    var cell = document.createElement("td");
    if (this.checked){
       var empty = document.createTextNode(year);
    }
    cell.appendChild(empty);
    row.appendChild(cell);
    table.appendChild(row); 
}

var checkboxes = document.getElementsByClassName('year');
    for(var index in checkboxes){
        checkboxes[index].onchange = yearTable;
    }

Thanks