item selected in checkbox & show/hide

item selected in checkbox & show/hide

Hi I have the following code. this works only for one row. I want this should work for both rows & also if I select the top checkbox, then it should select all the checkboxes to show all items in the table. 
there are Qty & Option column, I want these item should not be visible until I select the checkbox. 

  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">

  5. <head>
  6. <meta content="en-us" http-equiv="Content-Language" />
  7. <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
  8. <title>Quotation New Design</title>
  9. <link href="css/bootstrap.min.css" rel="stylesheet">
  10. <script type="text/javascript" >
  11. function valueChanged()
  12. {
  13. if($(".checkezspeedkit").is(":checked"))   
  14. $(".qtyezspeedkit ").show();
  15. else
  16. $(".qtyezspeedkit").hide();
  17. }
  18. </script>
  20. <style type="text/css">
  21. .qtyezspeedkit {
  22. display:none;
  23. }
  24. .optionezspeedkit{
  25. display:none;
  26. }
  27. .qtyezspeedkitbluetooth{
  28. display:none;
  29. }
  30. .optionezspeedkitbluetooth{
  31. display:none;
  32. }
  33. </style>
  34. </head>

  36. <body>
  37. <div class="container">
  38.     <div class="row">
  39.         <div class="col-md-12">
  40.         <h4>Checkbox Test</h4>
  41.         <div class="table-responsive">
  42.               <table id="mytable" class="table table-bordred table-striped">
  43.                    <thead>
  44. <th><input type="checkbox" id="checkall" /></th>
  45. <th>Name</th>
  46. <th>Qty</th>
  47. <th>Option</th>
  48.                    </thead>
  49.     <tbody>
  50. <tr>
  51. <td><input type="checkbox" class="checkezspeedkit" name="chkezspeedkit" onchange="valueChanged()"/></td>
  52. <td>EZSpeed Kit</td>
  53. <td>
  54. <select name="Select1" style="width: 50px" class="qtyezspeedkit" >
  55. <option>1</option>
  56. <option>2</option>
  57. <option>3</option>
  58. <option>4</option>
  59. <option>5</option>
  60. <option>6</option>
  61. </select>
  62. </td>
  63. <td>
  64. <select name="Select2" style="width: 137px" class="qtyezspeedkit">
  65. <option>Please select</option>
  66. <option>Required</option>
  67. <option>Option</option>
  68. </select>
  69. </td>
  70. </tr>
  71. <tr>
  72. <td><input type="checkbox" class="checkezenergykit" name="chkezspeedkitbluetooth" onchange="valueChanged()"/></td>
  73. <td>EZEnergy Kit</td>
  74. <td>
  75. <select name="Select1" style="width: 50px" class="qtyezspeedkitbluetooth" >
  76. <option>1</option>
  77. <option>2</option>
  78. <option>3</option>
  79. <option>4</option>
  80. <option>5</option>
  81. <option>6</option>
  82. </select>
  83. </td>
  84. <td>
  85. <select name="Select2" style="width: 137px" class="optionezspeedkitbluetooth" >
  86. <option>Please select</option>
  87. <option>Required</option>
  88. <option>Option</option>
  89. </select>
  90. </td>
  91. </tr>
  92. </tbody>
  93. </table>
  94.     </div>
  95.   </div>
  96. </div>
  97. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  98. <script src="js/bootstrap.min.js"></script>
  99. </body>
  100. </html>