js实现复选框
实现复选框的基本方法
使用HTML的<input type="checkbox">元素创建复选框，并通过JavaScript监听其变化。
<input type="checkbox" id="myCheckbox">
<label for="myCheckbox">选择此项</label>const checkbox = document.getElementById('myCheckbox');
checkbox.addEventListener('change', function() {
if (this.checked) {
console.log('复选框被选中');
} else {
console.log('复选框未被选中');
}
});获取复选框状态
可以通过checked属性获取或设置复选框的选中状态。
// 获取状态
const isChecked = checkbox.checked;
// 设置状态
checkbox.checked = true; // 选中
checkbox.checked = false; // 取消选中处理多个复选框
当需要处理一组复选框时，可以为它们添加相同的name属性或class。
<input type="checkbox" name="fruit" value="apple"> 苹果
<input type="checkbox" name="fruit" value="banana"> 香蕉
<input type="checkbox" name="fruit" value="orange"> 橙子const fruits = document.getElementsByName('fruit');
fruits.forEach(checkbox => {
checkbox.addEventListener('change', function() {
const selectedFruits = Array.from(fruits)
.filter(c => c.checked)
.map(c => c.value);
console.log('选中的水果:', selectedFruits);
});
});全选/全不选功能
实现一个控制多个复选框的全选功能。
<input type="checkbox" id="selectAll"> 全选/全不选
<div id="checkboxGroup">
<input type="checkbox" class="item"> 选项1
<input type="checkbox" class="item"> 选项2
<input type="checkbox" class="item"> 选项3
</div>const selectAll = document.getElementById('selectAll');
const items = document.querySelectorAll('.item');
selectAll.addEventListener('change', function() {
items.forEach(checkbox => {
checkbox.checked = this.checked;
});
});使用事件委托优化性能
对于大量复选框，使用事件委托可以提高性能。
document.getElementById('checkboxGroup').addEventListener('change', function(e) {
if (e.target.classList.contains('item')) {
console.log('复选框状态改变:', e.target.checked);
}
});自定义复选框样式
通过隐藏原生复选框并使用CSS自定义样式。
<label class="custom-checkbox">
<input type="checkbox">
<span class="checkmark"></span>
自定义复选框
</label>.custom-checkbox {
position: relative;
padding-left: 25px;
cursor: pointer;
}
.custom-checkbox input {
position: absolute;
opacity: 0;
}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 18px;
width: 18px;
background-color: #eee;
border-radius: 3px;
}
.custom-checkbox input:checked ~ .checkmark {
background-color: #2196F3;
}
.checkmark:after {
content: "";
position: absolute;
display: none;
}
.custom-checkbox input:checked ~ .checkmark:after {
display: block;
}
.custom-checkbox .checkmark:after {
left: 6px;
top: 2px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
}使用第三方库
对于复杂需求，可以考虑使用第三方库如jQuery或专门的UI库。
// 使用jQuery
$('#myCheckbox').change(function() {
if ($(this).is(':checked')) {
console.log('复选框被选中');
}
});
