How to change backgrounds of multiple elements?

Hello. I have a table with dynamically generated rows. I need to change color of backgrounds of the two inputs after checking a checkbox next to them (and after unchecking I need to change the backgrounds back). Any idea how to do it?

<div style="max-height:400px;overflow:auto;">

<table style="width:100%;">
<tbody><tr><td style="width:30%;">Tag name</td><td style="width:68%;">Related words</td><td style="width:2%;"></td></tr>

<tr>
<td><input style="width:100%;" name="apt_taglist_tag_[1]" value="asfd" maxlength="255" type="text"></td>
<td><input style="width:100%;" name="apt_taglist_related_words_[1]" value="" maxlength="255" type="text"></td>
<td><input style="width:10px;" name="apt_taglist_checkbox_[1]" type="checkbox"></td>
</tr>
<tr>
<td><input style="width:100%;" name="apt_taglist_tag_[3]" value="dolor sit" maxlength="255" type="text"></td>
<td><input style="width:100%;" name="apt_taglist_related_words_[3]" value="amet" maxlength="255" type="text"></td>
<td><input style="width:10px;" name="apt_taglist_checkbox_[3]" type="checkbox"></td>
</tr>
<tr>
<td><input style="width:100%;" name="apt_taglist_tag_[2]" value="lorem" maxlength="255" type="text"></td>
<td><input style="width:100%;" name="apt_taglist_related_words_[2]" value="ipsum" maxlength="255" type="text"></td>
<td><input style="width:10px;" name="apt_taglist_checkbox_[2]" type="checkbox"></td>
</tr>
</tbody></table>

</div>

HTML:

 

try this

Note how each input element as a unique id

<div style="max-height:400px;overflow:auto;">


<table style="width:100%;">
<tbody><tr><td style="width:30%;">Tag name</td><td style="width:68%;">Related words</td><td style="width:2%;"></td></tr>


<tr>
<td><input style="width:100%;" name="apt_taglist_tag_[1]" id="apt_taglist_tag_1" value="asfd" maxlength="255" type="text"></td>
<td><input style="width:100%;" name="apt_taglist_related_words_[1]"   id="apt_taglist_related_words_1" value="" maxlength="255" type="text"></td>
<td><input style="width:10px;" name="apt_taglist_checkbox_[1]" id="apt_taglist_checkbox_1" type="checkbox" onclick="checking(1);" /></td>
</tr>
<tr>
<td><input style="width:100%;" name="apt_taglist_tag_[3]"   id="apt_taglist_tag_3" value="dolor sit" maxlength="255" type="text"></td>
<td><input style="width:100%;" name="apt_taglist_related_words_[3]"  id="apt_taglist_related_words_3" value="amet" maxlength="255" type="text"></td>
<td><input style="width:10px;" name="apt_taglist_checkbox_[3]" id="apt_taglist_checkbox_3" type="checkbox" onclick="checking(3);" /></td>
</tr>
<tr>
<td><input style="width:100%;" name="apt_taglist_tag_[2]"   id="apt_taglist_tag_2"value="lorem" maxlength="255" type="text"></td>
<td><input style="width:100%;" name="apt_taglist_related_words_[2]" id="apt_taglist_related_words_2" value="ipsum" maxlength="255" type="text"></td>
<td><input style="width:10px;" name="apt_taglist_checkbox_[2]" id="apt_taglist_checkbox_2" type="checkbox" onclick="checking(2);" /></td>
</tr>
</tbody></table>


</div>
<script type="text/javascript">


function checking(num) {


   if (document.getElementById("apt_taglist_checkbox_"+num).checked) {
     document.getElementById("apt_taglist_tag_"+num).style.backgroundColor='#ff0000';
     document.getElementById("apt_taglist_related_words_"+num).style.backgroundColor='ff0000';
   }
   else {
    document.getElementById("apt_taglist_tag_"+num).style.backgroundColor='';
    document.getElementById("apt_taglist_related_words_"+num).style.backgroundColor='';
   }


}


</script>

Code (markup):

 

It works, thank you very much.

 

no problem