我有一个颜色列表，希望用户最多选择 3 种。 当用户选择第四个时，最初选择的框应该取消选中（少于 3 个就可以了）。当用户选择颜色时，它应该触发和事件，因为我稍后将通过 XMLHttpRequest 发送它。
我需要发送最多 3 种颜色，即 c1= & c2= & c3=
请解释一下如何获得它，我对此很陌生..
var queue = [];
function check(val1) {
if (document.getElementById(val1).prop('checked', true))
queue.push(val1);
//alert(queue[0] + '-' + queue[1] + '-' + queue[2]);
if (queue.length > 3) {
var val2 = queue.shift();
queue.push(val1);
//alert(queue[0] + '-' + queue[1] + '-' + queue[2]);
document.getElementById(val2).prop('checked', false);
}
}<input type="checkbox" onchange="check(this.value)" value="red" id="red">
<div style="background-color:red; width:50px; height:25px;"></div>
<input type="checkbox" onchange="check(this.value)" value="blue" id="blue">
<div style="background-color:blue; width:50px; height:25px;"></div>
<input type="checkbox" onchange="check(this.value)" value="green" id="green">
<div style="background-color:green; width:50px; height:25px;"></div>
<input type="checkbox" onchange="check(this.value)" value="yellow" id="yellow">
<div style="background-color:yellow; width:50px; height:25px;"></div>
<input type="checkbox" onchange="check(this.value)" value="orange" id="orange">
<div style="background-color:orange; width:50px; height:25px; "></div>
<input type="checkbox" onchange="check(this.value)" value="black" id="black">
<div style="background-color:black; width:50px; height:25px;"></div>您可以像这样重写您的
checkfunction check(val1) {
var chk_arr = document.getElementsByName("chk");
var chklength = chk_arr.length;
var tot = 0;
var i = -1;
for(k=0;k< chklength;k++) {
if (chk_arr[k].checked) {
tot++;
if (i < 0) i = k;
}
if (tot > 3) { chk_arr[i].checked = false; }
}
}
只需为所有复选框提供一个通用名称即可。这样就不需要从每个复选框中传递
this查看更新的小提琴：http://jsfiddle.net/Gg5Hv/7/
给你的复选框一个类名 chk，所以 html 是：
<input class="chk" type="checkbox" onchange="check(this.value)" value="red" id="red">
<div style="background-color:red; width:50px; height:25px;"></div>
<input class="chk" type="checkbox" onchange="check(this.value)" value="blue" id="blue">
<div style="background-color:blue; width:50px; height:25px;"></div>
<input class="chk" type="checkbox" onchange="check(this.value)" value="green" id="green">
<div style="background-color:green; width:50px; height:25px;"></div>
<input class="chk" type="checkbox" onchange="check(this.value)" value="yellow" id="yellow">
<div style="background-color:yellow; width:50px; height:25px;"></div>
<input class="chk" type="checkbox" onchange="check(this.value)" value="orange" id="orange">
<div style="background-color:orange; width:50px; height:25px; "></div>
<input class="chk" type="checkbox" onchange="check(this.value)" value="black" id="black">
<div style="background-color:black; width:50px; height:25px;"></div>
在jquery中你可以这样做：
<script>
var count = 0;
$(function(){
$('.chk').click(function(){
if(count > 3) { count = 0; return;}
else{
if($(this).prop('checked')){
// do something
count++;
}
}
});
});
<script>
<body>
<input type="checkbox" value="red" id="red">
<div style="background-color:red; width:50px; height:25px;"></div>
<input type="checkbox" value="blue" id="blue">
<div style="background-color:blue; width:50px; height:25px;"></div>
<input type="checkbox" value="green" id="green">
<div style="background-color:green; width:50px; height:25px;"></div>
<input type="checkbox" value="yellow" id="yellow">
<div style="background-color:yellow; width:50px; height:25px;"></div>
<input type="checkbox" value="orange" id="orange">
<div style="background-color:orange; width:50px; height:25px; "></div>
<input type="checkbox" value="black" id="black">
<div style="background-color:black; width:50px; height:25px;"></div>
<script>
var array = [];
$("input").change(function () {
if ($(this).is(":checked")) {
array.push(this.id);
if (array.length > 3) {
array.splice(0, 1);
}
$("input").prop("checked", false);
for (var i = 0; i < array.length; i++) {
$("#" + array[i]).prop("checked", true);
}
}
else {
var index = array.indexOf(this.id);
array.splice(index, 1);
}
});
</script>
</body>
（必须更新，如果手动取消选中该复选框，我忘记删除该元素）
其工作原理如下：
首先，创建一个数组来保存所有正在检查的复选框的 id。
向每个复选框添加一个事件处理程序。
如果选中该复选框，则将 id 添加到数组中。
如果数组长度大于3，则从数组中删除第一个id。
取消选中所有复选框，然后仅选中数组中的框。
如果用户手动取消选中某个框，则将其从阵列中删除。
如果您还有其他问题，请告诉我。谢谢。
var ary = [], k = 0;
document.querySelectorAll(".chk").forEach((element) => {
element.addEventListener("click", () => {
let idc = element.id;
if(document.getElementById(idc).checked == true){
k++;
if(k > 3){
document.getElementById(ary[0]).checked = false;
ary[0] = ary[1];
ary[1] = ary[2];
ary[2] = idc;
k=3;
}
else{ ary[k-1] = idc; }
}
else{ k--; }
});
});<input class="chk" type="checkbox" value="red" id="red">
<div style="background-color:red; width:50px; height:25px;"></div>
<input class="chk" type="checkbox" value="blue" id="blue">
<div style="background-color:blue; width:50px; height:25px;"></div>
<input class="chk" type="checkbox" value="green" id="green">
<div style="background-color:green; width:50px; height:25px;"></div>
<input class="chk" type="checkbox" value="yellow" id="yellow">
<div style="background-color:yellow; width:50px; height:25px;"></div>
<input class="chk" type="checkbox" value="orange" id="orange">
<div style="background-color:orange; width:50px; height:25px; "></div>
<input class="chk" type="checkbox" value="black" id="black">
<div style="background-color:black; width:50px; height:25px;"></div>