删除重复的复选框可以通过以下步骤进行:
以下是一个示例代码:
<!DOCTYPE html>
<html>
<head>
<title>删除重复的复选框</title>
</head>
<body>
<input type="checkbox" id="checkbox1" onclick="removeDuplicates(this)">
<input type="checkbox" id="checkbox2" onclick="removeDuplicates(this)">
<input type="checkbox" id="checkbox3" onclick="removeDuplicates(this)">
<input type="checkbox" id="checkbox4" onclick="removeDuplicates(this)">
<input type="checkbox" id="checkbox5" onclick="removeDuplicates(this)">
<script>
function removeDuplicates(checkbox) {
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
var values = [];
for (var i = 0; i < checkboxes.length; i++) {
var value = checkboxes[i].value;
if (values.indexOf(value) !== -1) {
checkboxes[i].parentNode.removeChild(checkboxes[i]);
} else {
values.push(value);
}
}
}
</script>
</body>
</html>
在这个示例中,当复选框被点击时,会调用名为removeDuplicates
的函数。该函数会获取所有复选框的引用,并使用数组来存储已经存在的复选框值。然后,遍历复选框引用数组,对于每个复选框,检查其值是否已经存在于数组中。如果值已经存在于数组中,则使用removeChild
方法从DOM中删除该复选框。如果值不存在于数组中,则将其添加到数组中。
这样,重复的复选框将会被删除,只保留一个。
领取专属 10元无门槛券
手把手带您无忧上云