LABEL is not working in IE11 with <TR>, need to select the radio button on click of the row anywhere

Question

using the below piece of code inside a table which selects the radio on click of the row. It works till IE9 but this piece of code doesn't work in IE10 and above or chrome. Can anyone suggest if they have faced the similar issue ? Any suggestion which involves little modification will be helpful.

<LABEL FOR="radio<%=k%>" align="top">
<TR BGCOLOR="#<%=rowColor%>">
    <TD WIDTH="25" VALIGN="top"><INPUT TYPE="RADIO" NAME="xyz"
        <%=checked%> ID="radio<%=k%>" VALUE="<%=value%>"></TD>
    <TD WIDTH="120" VALIGN="top"><%=value%></TD>
    <TD WIDTH="145" VALIGN="top"><%=value%>
    <%=value%></TD>
    <TD WIDTH="135" VALIGN="top"><%=value%>
    <%=value%></TD>
    <TD WIDTH="50" VALIGN="top"><%=value%></TD>
    <TD WIDTH="*" VALIGN="top"><%=value%>
    </TD>
</TR>
</LABEL>

Answer 1

You cannot enclose separate tr within a separate label. Try some script to achieve this.

function toggle_row(e, row_id) {
  e = e || window.event; //get event
  var el = e.srcElement || e.target; //get the right html element, on which user clicked
  var input = document.getElementById(row_id);//get the checkbox for the row clicked
  if (el != input) //checkbox was not clicked
    input.checked = !input.checked; //flip the checkbox selection
}

tr {
  cursor: pointer;
}

<table>
  <tr onclick="toggle_row(event,'row_1')">
    <td>
      <input type="checkbox" id="row_1" />
    </td>
    <td>Foo</td>
    <td>Bar</td>
  </tr>
  <tr onclick="toggle_row(event,'row_2')">
    <td>
      <input type="checkbox" id="row_2" />
    </td>
    <td>Foo</td>
    <td>Bar</td>
  </tr>
  <tr onclick="toggle_row(event,'row_3')">
    <td>
      <input type="checkbox" id="row_3" />
    </td>
    <td>Foo</td>
    <td>Bar</td>
  </tr>
</table>