Javascript 要求选中一定数量的复选框

我在一个表格中显示了许多图像，并要求用户从中选择五个

以下是一个表格行的示例：

<tr>
        <td align="center" style="width: 200px; height: 200px"><input id="Image21_flag" name="flag" style="display: none;" type="checkbox" value="img21"/><label class="middlealign" for="Image21_flag"><img onerror="imgError(this);" src="${URL21}" /></label>
        </td>
        <td align="center" style="width: 200px; height: 200px"><input id="Image22_flag" name="flag" style="display: none;" type="checkbox" value="img22"/><label class="middlealign" for="Image22_flag"><img onerror="imgError(this);" src="${URL22}" /></label>
        </td>
        <td align="center" style="width: 200px; height: 200px"><input id="Image23_flag" name="flag" style="display: none;" type="checkbox" value="img23"/><label class="middlealign" for="Image23_flag"><img onerror="imgError(this);" src="${URL23}" /></label>
        </td>
        <td align="center" style="width: 200px; height: 200px"><input id="Image24_flag" name="flag" style="display: none;" type="checkbox" value="img24"/><label class="middlealign" for="Image24_flag"><img onerror="imgError(this);" src="${URL24}" /></label>
        </td>
        <td align="center" style="width: 200px; height: 200px"><input id="Image25_flag" name="flag" style="display: none;" type="checkbox" value="img25"/><label class="middlealign" for="Image25_flag"><img onerror="imgError(this);" src="${URL25}" /></label>
        </td>
    </tr>

---

如何要求至少选择五个复选框？

我不使用jQuery，但您可以使用document.querySelectorAll检索所有复选框，并使用示例创建一个仅包含选中复选框的数组，并检查数组大小是否大于或等于5

例如：

const checkboxArray=document.querySelectorAll.checkbox'； 常量checkedArray=Array.fromcheckboxArray.filteritem=>item.checked 如果选中Array.length>5{ //选中超过5个复选框，请执行某些操作 } 注意：这可以通过：checked在css中获得checked输入

---

请参阅：

尝试以下方法：

$function{ $'input[name=flag[]]”。changefunctionevent{ var max=5； 如果$'input[name=flag[]]：选中'.length==max' $'input[name=flag[]]'。未选中。'prop'disabled'，true； 其他的 $'input[name=flag[]'。removeAttr'disabled'； }; $'form'.submitfunctionevent{ 如果$'input[name=flag[]]：选中'.length！=5{ 违约事件； window.alerts请选择五张图片； 返回false； }; }; }; 我在一个表中显示了许多图像，并要求用户进行选择 其中五个。[…]我如何要求至少选择五个

有许多不同的方法可以做到这一点，但有一种方法是保留一个活动日志，记录有多少复选框被选中和没有被选中，然后，每次操作需要响应时，检查live total并相应地响应

工作示例：

//获取DOM元素 const myForm=document.getElementsByTagName'form'[0]； const mycheckbox=[…myForm.queryselectoral'input[type=checkbox]']； const mySubmitButton=myForm.querySelector'input[type=button]； //初始化复选框日志 设checkboxLog=0； //**************************// //**************************// //函数日志复选框 函数logCheckedBoxesevent{ checkboxLog=event.target.checked==true？checkboxLog+1:checkboxLog-1； console.logcheckboxLog+“复选框已选中”； } //函数提交选择 函数提交选择{ 如果checkboxLog==5{ window.alert'5个选项已提交！'； } 如果checkboxLog<5，则为else{ window.Alert您总共需要选择5个框。\n\n请选择+5-复选框日志+更多框！； } } //**************************// //**************************// //将日志记录事件添加到每个复选框 对于MyCheckBox的复选框{ 复选框.addEventListener'change'，LogCheckedBox，false； } //添加要提交的事件按钮 mySubmitButton.addEventListener'click'，submitChoices，false；

---

请解释投票结果。谢谢

$("input[name=flag]").change(function(){
var max= 5;
if( $("input[name=flag]:checked").length == max ){
    $("input[name=flag]").attr('disabled', 'disabled');
    $("input[name=flag]:checked").removeAttr('disabled');
}else{
     $("input[name=flag]").removeAttr('disabled');
}