Y星人の工作語錄

別理我, 我只是一個愛發勞騷的Y星人

7月
01

a Quiz - click td rows, change th(no)+td(answer) background and radio checked.

Posted by YuanYuan

a Quiz form,

I want to user to click td rows and choose their right answer not click radio buttons.
and I chage no background tell user, they had choose the answer.

so I do wrtie this code.

This sample have some fun, the answer not alaway 4 items, maybe some 3 items.

  1. th.selected {background:#EAEAEA;}
  2. td.selected {background:#336699;}
  3. td.selected label.selected {font-weight:bold; color:#fff}
  1. <table cellspacing="0" id="ansTable">
  2. <tbody id="content">
  3. <tr class="statement5">
  4.     <th style="width: 2%;">
  5.         <label>1</label>
  6.     </th>
  7.     <td>
  8.         <input name="seq1" tabindex="1" value="A" type="radio"><label for="seq1">A</label>
  9.     </td>
  10.     <td>
  11.         <input name="seq1" tabindex="2" value="B" type="radio"><label for="seq1">B</label>
  12.     </td>
  13.     <td>
  14.         <input name="seq1" tabindex="3" value="C" type="radio"><label for="seq1">C</label>
  15.     </td>
  16.     <td>
  17.         <input name="seq1" tabindex="4" value="D" type="radio"><label for="seq1">D</label>
  18.     </td>
  19. </tr>
  20. <tr class="statement5">
  21.     <th style="width: 2%;">
  22.         <label>2</label>
  23.     </th>
  24.     <td>
  25.         <input name="seq2" tabindex="1" value="A" type="radio"><label for="seq2">A</label>
  26.     </td>
  27.     <td>
  28.         <input name="seq2" tabindex="2" value="B" type="radio"><label for="seq2">B</label>
  29.     </td>
  30.     <td>
  31.         <input name="seq2" tabindex="3" value="C" type="radio"><label for="seq2">C</label>
  32.     </td>
  33.     <td>
  34.         <input name="seq2" tabindex="4" value="D" type="radio"><label for="seq2">D</label>
  35.     </td>
  36. </tr>
  37. <tr class="statement5">
  38.     <th style="width: 2%;">
  39.         <label>3</label>
  40.     </th>
  41.     <td>
  42.         <input name="seq3" tabindex="1" value="A" type="radio"><label for="seq3">A</label>
  43.     </td>
  44.     <td>
  45.         <input name="seq3" tabindex="2" value="B" type="radio"><label for="seq3">B</label>
  46.     </td>
  47.     <td>
  48.         <input name="seq3" tabindex="3" value="C" type="radio"><label for="seq3">C</label>
  49.     </td>
  50.     <td>
  51.         <input name="seq3" tabindex="4" value="D" type="radio"><label for="seq3">D</label>
  52.     </td>
  53. </tr>
  54. <tr class="statement5">
  55.     <th style="width: 2%;">
  56.         <label>4</label>
  57.     </th>
  58.     <td>
  59.         <input name="seq4" tabindex="1" value="A" type="radio"><label for="seq4">A</label>
  60.     </td>
  61.     <td>
  62.         <input name="seq4" tabindex="2" value="B" type="radio"><label for="seq4">B</label>
  63.     </td>
  64.     <td>
  65.         <input name="seq4" tabindex="3" value="C" type="radio"><label for="seq4">C</label>
  66.     </td>
  67.     <td>
  68.         <input name="seq4" tabindex="4" value="D" type="radio"><label for="seq4">D</label>
  69.     </td>
  70. </tr>
  71. <tr class="statement5">
  72.     <th style="width: 2%;">
  73.         <label>5</label>
  74.     </th>
  75.     <td>
  76.         <input name="seq5" tabindex="1" value="A" type="radio"><label for="seq5">A</label>
  77.     </td>
  78.     <td>
  79.         <input name="seq5" tabindex="2" value="B" type="radio"><label for="seq5">B</label>
  80.     </td>
  81.     <td>
  82.         <input name="seq5" tabindex="3" value="C" type="radio"><label for="seq5">C</label>
  83.     </td>
  84.     <td>
  85.         <input name="seq5" tabindex="4" value="D" type="radio"><label for="seq5">D</label>
  86.     </td>
  87. </tr>
  88. </tbody>
  89. </table>
  1. $("#ansTable tr td:has(:radio)").click(function(event) {
  2.  
  3.     $(this).closest('tr').find("td").removeClass();
  4.  
  5.     $(this).addClass('selected');
  6.     $(this).parent().find("th").addClass('selected')
  7.     $(this).find('label').addClass('selected');
  8.     $(this).find(':radio').attr('checked', true);
  9.  
  10. });
« How multi radiobox groups check?

Add A Comment