我使用此頁面創建此代碼 https://getbootstrap.com/docs/5.0/forms/checks-radios/#indeterminate
當我點擊 id=(flexCheckIndeterminate) 的復選框時，它下面的所有復選框都會被選中，再次單擊它，它下面的所有復選框都會被取消。
如何在不使用 jQuery 的情況下通過 JS 做到這一點？
<!doctype HTML>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-
EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h2>Bootstrap Table Checkbox Select All and Cancel</h2>
<div class="container">
<table class="table table-bordered table-hover" id="dataTable" width="100%" cellspacing="0">
<thead>
<tr>
<th>
<div class="form-check">
<input class="form-check-input" type="checkbox" value=""
id="flexCheckIndeterminate">
<label class="form-check-label" for="flexCheckIndeterminate">
</label>
</div>
</th>
<th>#</th>
<th >Name</th>
<th > ID</th>
<th >Date & Time</th>
<th >Check-in</th>
</tr>
</thead>
<tbody>
<tr>
<td><div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
</label>
</div>
</td>
<td>1</td>
<td>Safaa</td>
<td>20421</td>
<td>12/2/2021 16:40</td>
<td>Yes</td>
</tr>
<tr>
<td><div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck2">
<label class="form-check-label" for="defaultCheck2">
</label>
</div>
</td>
<td>2</td>
<td>Noor</td>
<td>19091</td>
<td>15/2/2021 16:40</td>
<td>No</td>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
</body>
</html>uj5u.com熱心網友回復：
我很好奇，你為什么甚至提到 JQuery？Bootstrap 5 不再使用它。
好吧，我想這就是你想要的：
// get the global checkbox
const checkbox = document.getElementById("flexCheckIndeterminate");
// listen to changes
checkbox.addEventListener('input', evt => {
// get event value
const checked = evt.target.checked;
// get all other checkboxes
const checkboxes = document.querySelectorAll('input[type="checkbox"]');
// update them with the value of the global checkbox
checkboxes.forEach(checkbox => {
checkbox.checked = checked;
});
});
uj5u.com熱心網友回復：
下面是一個例子：
document.getElementById('flexCheckIndeterminate').addEventListener('click', e => {
document.querySelectorAll('.form-check-input').forEach(checkbox => {
checkbox.checked = e.target.checked
})
})<!doctype HTML>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-
EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h2>Bootstrap Table Checkbox Select All and Cancel</h2>
<div class="container">
<table class="table table-bordered table-hover" id="dataTable" width="100%" cellspacing="0">
<thead>
<tr>
<th>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminate">
<label class="form-check-label" for="flexCheckIndeterminate">
</label>
</div>
</th>
<th>#</th>
<th>Name</th>
<th> ID</th>
<th>Date & Time</th>
<th>Check-in</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
</label>
</div>
</td>
<td>1</td>
<td>Safaa</td>
<td>20421</td>
<td>12/2/2021 16:40</td>
<td>Yes</td>
</tr>
<tr>
<td>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck2">
<label class="form-check-label" for="defaultCheck2">
</label>
</div>
</td>
<td>2</td>
<td>Noor</td>
<td>19091</td>
<td>15/2/2021 16:40</td>
<td>No</td>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/345976.html
上一篇：使用箭頭函式轉換字串介紹陣列
下一篇：在現有的div中創建新的div