需要检查输入和 4 个选项的检查

Question

我有一个复选框列表，用户可以在其中选择口味，但我不知道如何让用户从1到máximum 4种口味中进行选择，需要1种口味，最多4种口味。

如果我在每种口味上都加上必填项，那么每种口味都是必填项，并且我需要被要求用户可以检查任何口味。

？如何实现这一点有什么帮助吗？非常感谢。

HTML

<div class="avatar small-3 large-2 columns">
<input type="checkbox" id="Jamón" hidden-data="Sabores" onchange="fillHidden('Sabores')" value="Jamón">
<img src="https://cdn.shopify.com/s/files/1/1107/5554/files/jamon_781f5c81-af75-48aa-bf1b-982fea9741f9.jpg?v=1580515764" alt="" />
<label for="Jamón">Jamón</label>
</div>
<div class="avatar small-3 large-2 columns">
<input type="checkbox" id="bacon" hidden-data="Sabores" onchange="fillHidden('Sabores')" value="Bacon Parmesano">
<img src="https://cdn.shopify.com/s/files/1/1107/5554/files/bacon_81ce213f-0281-48a3-8980-a100956f3e3a.jpg?v=1580515764" alt="" />
<label for="bacon">Bacon Parmesano</label>
</div>
<div class="avatar small-3 large-2 columns">
<input type="checkbox" id="trufa" hidden-data="Sabores" onchange="fillHidden('Sabores')" value="Trufa">
<img src="https://cdn.shopify.com/s/files/1/1107/5554/files/trufa.jpg?v=1580516040" alt="" />
<label for="trufa">Trufa Negra</label>
</div>
<div class="avatar small-3 large-2 columns">
<input type="checkbox" id="pollocurry" hidden-data="Sabores" onchange="fillHidden('Sabores')" value="Pollo al curry">
<img src="https://cdn.shopify.com/s/files/1/1107/5554/files/curry.jpg?v=1580515361" alt="" />
<label for="pollocurry">Pollo al curry</label>
</div>
<div class="avatar small-3 large-2 columns">
<input type="checkbox" id="pollocurry" hidden-data="Sabores" onchange="fillHidden('Sabores')" value="Pollo al curry">
<img src="https://cdn.shopify.com/s/files/1/1107/5554/files/asado.jpg?v=1580515763" alt="" />
<label for="pollocurry">Pollo asado</label>
</div>
<div class="avatar small-3 large-2 columns">
<input type="checkbox" id="quesoazul" hidden-data="Sabores" onchange="fillHidden('Sabores')" value="Queso Azul">
<img src="https://cdn.shopify.com/s/files/1/1107/5554/files/azul.jpg?v=1580516040" alt="" />
<label for="quesoazul">Queso Azul</label>
</div>
<div class="avatar small-3 large-2 columns">
<input type="checkbox" id="marisco" hidden-data="Sabores" onchange="fillHidden('Sabores')" value="Marisco">
<img src="https://cdn.shopify.com/s/files/1/1107/5554/files/marisco_d6ed6f7f-71d1-4774-a789-04527f639fe5.jpg?v=1580515764" alt="" />
<label for="marisco">Marisco</label>
</div>
<div class="avatar small-3 large-2 columns">
<input type="checkbox" id="espinacas" hidden-data="Sabores" onchange="fillHidden('Sabores')" value="Espinacas">
<img src="https://cdn.shopify.com/s/files/1/1107/5554/files/espi.jpg?v=1580515764" alt="" />
<label for="espinacas">Espinacas</label>
</div>
<div class="avatar small-3 large-2 columns">
<input type="checkbox" id="bacalao" hidden-data="Sabores" onchange="fillHidden('Sabores')" value="Bacalao">
<img src="https://cdn.shopify.com/s/files/1/1107/5554/files/bac.jpg?v=1580515764" alt="" />
<label for="bacalao">Bacalao</label>
</div>
<div class="avatar small-3 large-2 columns">
<input type="checkbox" id="yorkqueso" hidden-data="Sabores" onchange="fillHidden('Sabores')" value="York Queso">
<img src="https://cdn.shopify.com/s/files/1/1107/5554/files/york.jpg?v=1580516040" alt="" />
<label for="yorkqueso">York Queso</label>
</div>
<div class="avatar small-3 large-2 columns">
<input type="checkbox" id="puerros" hidden-data="Sabores" onchange="fillHidden('Sabores')" value="Puerros confitados">
<img src="https://cdn.shopify.com/s/files/1/1107/5554/files/puerros_113f7bf7-4319-47c9-a689-db07db189b32.jpg?v=1580515361" alt="" />
<label for="puerros">Puerros confitados</label>
</div>
<div class="avatar small-3 large-2 columns">
<input type="checkbox" id="boletus" hidden-data="Sabores" onchange="fillHidden('Sabores')" value="Boletus">
<img src="https://cdn.shopify.com/s/files/1/1107/5554/files/boletus_1012973f-3a92-4097-80a8-26268137bf9d.jpg?v=1580515866" alt="" />
<label for="boletus">Boletus</label>
</div>
<div class="avatar small-3 large-2 columns">
<input type="checkbox" id="cocido" hidden-data="Sabores" onchange="fillHidden('Sabores')" value="Cocido">
<img src="https://cdn.shopify.com/s/files/1/1107/5554/files/cocido.jpg?v=1580516251" alt="" />
<label for="cocido">Cocido Madrileño</label>
</div>
<div class="avatar small-3 large-2 columns">
<input type="checkbox" id="chipis" hidden-data="Sabores" onchange="fillHidden('Sabores')" value="Chipirones">
<img src="https://cdn.shopify.com/s/files/1/1107/5554/files/chipis.jpg?v=1580516251" alt="" />
<label for="chipis">Chipirones</label>
</div>
<div class="avatar small-3 large-2 columns">
<input type="checkbox" id="chistorra" hidden-data="Sabores" onchange="fillHidden('Sabores')" value="Chistorra">
<img src="https://cdn.shopify.com/s/files/1/1107/5554/files/txistorra_32a4b480-1147-46ce-a245-5af947b0e429.jpg?v=1580515362" alt="" />
<label for="chistorra">Txistorra</label>
</div>
<input type="hidden" id="Sabores" name="properties[Sabores]">

脚本

<script>
function fillHidden(hiddenname) {
var checkboxes = document.querySelectorAll('[hidden-data="'+hiddenname+'"]');
var hiddenfield = document.getElementById(hiddenname);
hiddenfield.value = ""
var i;
for (i = 0; i < checkboxes.length; i++) {
var x = checkboxes[i];
if(x.checked){
if(hiddenfield.value==""){
hiddenfield.value = x.value;
}else{
hiddenfield.value = hiddenfield.value + ", " + x.value; 
} 
}
}
}
</script>

Answer 1

这不是一个完整的答案，因为我认为在提交表单之前，您应该至少选中一个必需的复选框(这将是一个单独的函数(。我只通过如下调整您的函数fillhidden()来解决最大值为4的问题：

function fillHidden(hiddenname) {
var checkboxes = document.querySelectorAll('[hidden-data="' + hiddenname + '"]');
var hiddenfield = document.getElementById(hiddenname);
hiddenfield.value = "";
var i;
for (i = 0; i < checkboxes.length; i++) {
var x = checkboxes[i];
if (x.checked) {
if (hiddenfield.value == "") {
hiddenfield.value = x.value;
} else {
hiddenfield.value = hiddenfield.value + ", " + x.value;
}
}
}
let selected = document.querySelectorAll("input[type='checkbox']:checked").length;
let unselected = document.querySelectorAll("input[type='checkbox']:not(:checked)");
if (selected == 4) {
for (var i = 0; i < unselected.length; i++) {
unselected[i].setAttribute("disabled", 'true');
}
} else {
for (var i = 0; i < unselected.length; i++) {
unselected[i].removeAttribute("disabled");
}
}
}