写一个tabs 里面有全选 复选,所有的tab页面相同复选、全选是联动的
时间: 2023-05-23 19:07:23 浏览: 141
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 tabCheckboxes = tabContent.querySelectorAll('input[type="checkbox"]');
let allChecked = true;
for (let j = 0; j < tabCheckboxes.length; j++) {
if (!tabCheckboxes[j].checked) {
allChecked = false;
break;
}
}
// Update "所有的tab页面相同复选" checkbox
const allTabCheckboxesChecked = 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 = allTabCheckboxesChecked.length === tabCheckboxes.length;
// Update "全选" checkbox
const allCheckedBoxes = document.querySelectorAll('input[type="checkbox"]:checked');
document.querySelector('#select-all').checked = allCheckedBoxes.length === checkboxes.length;
});
}
```
这段代码实现了一个基本的 tabs 组件,它包含多个选项卡,每个选项卡内部有多个复选框。全选复选框可以选择所有复选框,每个选项卡内的复选框状态更改会联动到该选项卡的“所有的tab页面相同复选”复选框,而所有选项卡的复选框状态更改又会联动到“全选”复选框。
阅读全文