A：以下是
一个简单的实现：
HTML：
```
<div class="tabs">
<div class="tab-headers">
<div class="tab-header active" data-tab="tab1">Tab 1</div>
<div class="tab-header" data-tab="tab2">Tab 2</div>
<div class="tab-header" data-tab="tab3">Tab 3</div>
<div class="select-all">
<input type="
checkbox" id="select-all" />
<label for="select-all">
全选</label>
</div>
</div>
<div class="tab-content active" data-tab="tab1">
<div class="
checkboxes">
<div>
<input type="
checkbox" name="tab1-
checkbox" id="tab1-
checkbox-1" />
<label for="tab1-
checkbox-1">
Checkbox 1</label>
</div>
<div>
<input type="
checkbox" name="tab1-
checkbox" id="tab1-
checkbox-2" />
<label for="tab1-
checkbox-2">
Checkbox 2</label>
</div>
</div>
</div>
<div class="tab-content" data-tab="tab2">
<div class="
checkboxes">
<div>
<input type="
checkbox" name="tab2-
checkbox" id="tab2-
checkbox-1" />
<label for="tab2-
checkbox-1">
Checkbox 1</label>
</div>
<div>
<input type="
checkbox" name="tab2-
checkbox" id="tab2-
checkbox-2" />
<label for="tab2-
checkbox-2">
Checkbox 2</label>
</div>
</div>
</div>
<div class="tab-content" data-tab="tab3">
<div class="
checkboxes">
<div>
<input type="
checkbox" name="tab3-
checkbox" id="tab3-
checkbox-1" />
<label for="tab3-
checkbox-1">
Checkbox 1</label>
</div>
<div>
<input type="
checkbox" name="tab3-
checkbox" id="tab3-
checkbox-2" />
<label for="tab3-
checkbox-2">
Checkbox 2</label>
</div>
</div>
</div>
</div>
```
CSS：
```
.tabs {
border: 1px solid #ccc;
margin: 20px;
}
.tab-headers {
display: flex;
}
.tab-header {
cursor: pointer;
padding: 10px;
background-color: #f2f2f2;
border-right: 1px solid #ccc;
flex-grow: 1;
text-align: center;
}
.tab-header.active {
background-color: #ccc;
}
.select-all {
margin-left: auto;
display: flex;
align-items: center;
padding: 10px;
}
.select-all label {
margin-left: 5px;
}
.tab-content {
display: none;
padding: 10px;
}
.tab-content.active {
display: block;
}
.
checkboxes {
display: flex;
flex-direction: column;
}
.
checkboxes div {
margin: 5px 0;
}
```
JavaScript：
```
const tabHeaders = document.querySelectorAll('.tab-header');
const tabContents = document.querySelectorAll('.tab-content');
const
checkboxes = document.querySelectorAll('input[type="
checkbox"]');
// Show the first tab by default
tabHeaders[0].classList.add('active');
tabContents[0].classList.add('active');
// Add event listeners to tab headers
for (let i = 0; i < tabHeaders.length; i++) {
tabHeaders[i].addEventListener('click', function() {
// Remove active class from all tab headers and tab contents
for (let j = 0; j < tabHeaders.length; j++) {
tabHeaders[j].classList.remove('active');
tabContents[j].classList.remove('active');
}
// Add active class to the clicked tab header and corresponding tab content
this.classList.add('active');
document.querySelector(`.tab-content[data-tab="${this.dataset.tab}"]`).classList.add('active');
});
}
// Add event listener to "
全选"
checkbox
document.querySelector('#select-all').addEventListener('change', function() {
for (let i = 0; i <
checkboxes.length; i++) {
checkboxes[i].checked = this.checked;
}
});
// Add event listeners to tab
checkboxes
for (let i = 0; i <
checkboxes.length; i++) {
checkboxes[i].addEventListener('change', function() {
// Get the tab content element that the
checkbox is in
const tabContent = this.closest('.tab-content');
// Get all
checkboxes in the same tab and check if they're all checked
const tab
Checkboxes = tabContent.querySelectorAll('input[type="
checkbox"]');
let allChecked = true;
for (let j = 0; j < tab
Checkboxes.length; j++) {
if (!tab
Checkboxes[j].checked) {
allChecked = false;
break;
}
}
// Update "所有的tab
页面相同复选"
checkbox
const allTab
CheckboxesChecked = document.querySelectorAll(`.tab-content[data-tab="${tabContent.dataset.tab}"] input[type="
checkbox"]:checked`);
document.querySelector(`.tab-header[data-tab="${tabContent.dataset.tab}"] input[type="
checkbox"]`).checked = allTab
CheckboxesChecked.length === tab
Checkboxes.length;
// Update "
全选"
checkbox
const allCheckedBoxes = document.querySelectorAll('input[type="
checkbox"]:checked');
document.querySelector('#select-all').checked = allCheckedBoxes.length ===
checkboxes.length;
});
}
```
这段代码实现了
一个基本的 tabs 组件，它包含
多个选项卡，每个选项卡内部有
多个复选框。
全选复选框可以选择所有复选框，每个选项卡内的复选框状态更改会联动到该选项卡的“所有的tab
页面相同复选”复选框，而所有选项卡的复选框状态更改又会联动到“
全选”复选框。
1599
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
