Question

I have these awkward checkboxes and unfortunately I cannot rename them the same due to some other coding reasons. How can I get the value of the checked checkbox?

<tr> 
   <td align=left colspan=6>
      <table border="0">
         <tr>
           <td><font class="body_text"> windows:  <input name="pro1" id="products0" type="checkbox" value="5" test="5"></td>
           <td><font class="body_text">  cpu:      <input name="pro2" id="products1" type="checkbox" value="2" test="2"></td>
           <td><font class="body_text">  keyboard: <input name="pro3" id="products2" type="checkbox" value="3" test="3"></td>
           <td><font class="body_text">  mouse:    <input name="pro4" id="products3" type="checkbox" value="4" test="4"></td>
         </tr>

I am using the following code which is returning undefined in alert:

if(document.form.pro1.checked) 
     alert(document.getElementById('products0').value);

Answer 1

Give your inner table an ID then…

myTable=document.getElementById('mytable');
var inputArray=myTable.getElementsByTagName('input');
for(var i=0;i<inputArray.length;i++){
    if(inputArray[i].type=='checkbox' && inputArray[i].checked==true){
    alert(inputArray[i].value);
}
    }