,可以通过以下步骤实现:
<input type="checkbox" id="checkbox1" value="Value 1"> Checkbox 1
<input type="checkbox" id="checkbox2" value="Value 2"> Checkbox 2
<input type="checkbox" id="checkbox3" value="Value 3"> Checkbox 3
var selectedValues = [];
使用原生JavaScript:
var checkbox1 = document.getElementById("checkbox1");
var checkbox2 = document.getElementById("checkbox2");
var checkbox3 = document.getElementById("checkbox3");
checkbox1.addEventListener("click", function() {
if (checkbox1.checked) {
selectedValues.push(checkbox1.value);
} else {
var index = selectedValues.indexOf(checkbox1.value);
if (index > -1) {
selectedValues.splice(index, 1);
}
}
});
checkbox2.addEventListener("click", function() {
if (checkbox2.checked) {
selectedValues.push(checkbox2.value);
} else {
var index = selectedValues.indexOf(checkbox2.value);
if (index > -1) {
selectedValues.splice(index, 1);
}
}
});
checkbox3.addEventListener("click", function() {
if (checkbox3.checked) {
selectedValues.push(checkbox3.value);
} else {
var index = selectedValues.indexOf(checkbox3.value);
if (index > -1) {
selectedValues.splice(index, 1);
}
}
});
使用jQuery:
$("#checkbox1").on("click", function() {
if ($(this).is(":checked")) {
selectedValues.push($(this).val());
} else {
var index = selectedValues.indexOf($(this).val());
if (index > -1) {
selectedValues.splice(index, 1);
}
}
});
$("#checkbox2").on("click", function() {
if ($(this).is(":checked")) {
selectedValues.push($(this).val());
} else {
var index = selectedValues.indexOf($(this).val());
if (index > -1) {
selectedValues.splice(index, 1);
}
}
});
$("#checkbox3").on("click", function() {
if ($(this).is(":checked")) {
selectedValues.push($(this).val());
} else {
var index = selectedValues.indexOf($(this).val());
if (index > -1) {
selectedValues.splice(index, 1);
}
}
});
这是一个基本的实现方法,可以根据具体需求进行修改和扩展。
领取专属 10元无门槛券
手把手带您无忧上云