Javascript 复选框限制后显示消息（多个实例）

如何根据每个实例显示

.checkboxmsg

，其中

复选框

限制仅适用于每个

.checkboxdiv

下的复选框

limit=0//设限
checkbox=document.querySelectorAll（'.checkboxdiv-input[type=“checkbox”]”）//选中所有复选框
功能检查器（elem）{
if（elem.checked）{//if checked，递增计数器
极限++；
}否则{
限制--；//否则，减量计数器
}
对于（i=0；i

.checkboxmsg{
显示：无；
颜色：红色！重要；
}
.checkboxdiv{
边框：2倍实心
}

一个

两个

三
一个

两个

三
只允许两个选项

您需要通过不同的标识符（例如名称）来区分groupbox，以便每个groupbox都有其可访问的限制，并且可以单独查询

limit={“check1”：0，“check2”：0}//设限
checkbox=document.querySelectorAll（'.checkboxdiv-input[type=“checkbox”]”）//选中所有复选框
功能检查器（elem）{
if（elem.checked）{//if checked，递增计数器
限制[$（elem）.prop（“名称”）]++；
}否则{
limit[$（elem）.prop（“name”）]-；//否则，减量计数器
}
复选框=document.querySelectorAll（'.checkboxdiv输入[name=“'+$（elem）.prop（“name”）+'”）；
对于（i=0；i

.checkboxmsg{
显示：无；
颜色：红色！重要；
}
.checkboxdiv{
边框：2倍实心
}

一个

两个

三
一个

两个

三
只允许两个选项

jQuery版本

使用

$（this）.closest（'.checkboxdiv'）

查找活动复选框的父项

var限值=2；
$（'：复选框'）。更改（函数（）{
var=0；
var parent=$（this）.closest（'.checkboxdiv'）；
find（'.checkboxmsg'）.hide（）；
查找（':checkbox'）。每个（函数（）{
如果（$（this）.is（':checked'））{
选中++；
//检查是否达到限制
如果（选中>=限制）{
find（“：checkbox:not（：checked）”）.attr（'disabled'，true）；
find（'.checkboxmsg'）.show（）；
}否则{
parent.find（“：checkbox”）.attr（'disabled'，false）；
}
}
});
});
.checkboxmsg{
显示：无；
颜色：红色！重要；
}
.checkboxdiv{
边框：2倍实心
}

一个

两个

三
只允许两个选项
一个

两个

三
只允许两个选项
您需要更改其中一个的name属性。