2025-06-08

【jQuery】jQuery + CSS 多個 checkbox 勾選 

  1.  
  2. <html>
  3. <head>
  4. <title>checkbox lab</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
  7. <script>
  8. // chkAll 點擊事件
  9. function checkAll() {
  10.     var isChecked = $('#chkAll').prop('checked');
  11.     // 更新所有 nameCheckbox 的狀態
  12.     $('.nameCheckbox').prop('checked', isChecked).trigger('change');
  13. }
  14.  
  15.  
  16. // 更新 chkAll 狀態
  17. function updateChkAll() {
  18.     var totalCheckboxes = $('.nameCheckbox').length;
  19.     var checkedCheckboxes = $('.nameCheckbox:checked').length;
  20.     var $chkAll = $('#chkAll');
  21.                
  22.     if (checkedCheckboxes === 0) {
  23.         // 全部未選中
  24.         $chkAll.prop('checked', false);
  25.         $chkAll.removeClass('partial');
  26.     } else if (checkedCheckboxes === totalCheckboxes) {
  27.         // 全部選中
  28.         $chkAll.prop('checked', true);
  29.         $chkAll.removeClass('partial');
  30.     } else {
  31.         // 部分選中
  32.         $chkAll.prop('checked', false);
  33.         // 關鍵修改：部分選中時保持 checked 但變灰色
  34.         $chkAll.prop('checked', true).addClass('partial');
  35.     }
  36. }
  37. </script>
  38. <style type="text/css">
  39. #chkAll {
  40.     margin-bottom: 10px;
  41.     font-size: 10px;
  42. }
  43. /* 部分選中時的灰色打勾 */
  44. #chkAll.partial {
  45.     accent-color: gray;  /* 現代瀏覽器 */
  46.     filter: grayscale(50%) opacity(80%);  /* 舊瀏覽器備用 */
  47. }
  48. </style>
  49. </head>
  50. <body>
  51. <center>
  52. <form name="frmInput" id="frmInput" method="post" action="func.php">
  53. <input type="hidden" name="act" value="input" />
  54. <table border="1">
  55. 	<tr>
  56. 		<th nowrap="nowrap"><input type="checkbox" id="chkAll" onchange="checkAll()" />全選</th>
  57. 		<th nowrap="nowrap">姓名</th>
  58. 	</tr>
  59. 	<tr>
  60. 		<td><input type="checkbox" class="nameCheckbox" id="chk1" onchange="updateChkAll()" /></td>
  61. 		<td>張三</td>
  62. 	</tr>
  63. 	<tr>
  64. 		<td><input type="checkbox" class="nameCheckbox" id="chk2" onchange="updateChkAll()" /></td>
  65. 		<td>李四</td>
  66. 	</tr>
  67. 	<tr>
  68. 		<td><input type="checkbox" class="nameCheckbox" id="chk3" onchange="updateChkAll()" /></td>
  69. 		<td>王五</td>
  70. 	</tr>
  71. </table>
  72. </form>
  73. </center>
  74. </body>
  75. </html>
  76.  
Labels: ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)