Javascript 如何计算所选复选框的数量，选择后更改背景，以及使悬停继续工作

我想创建一个用户可以选择的复选框列表，但是，将复选框的数量限制为5个，并向用户显示当前单击的复选框数量

我还想在选中复选框标签后更改其背景色

我的主要问题是显示选中了多少复选框的数字总是落后于一次单击。此外，背景颜色在被选中后会发生变化，但如果选中，悬停调用将停止工作

最后，我想听听关于如何使计数函数更干净的建议。我不喜欢有7个if语句

$（文档）.ready（函数（）{
$（“输入[name='group_option[]']”）。更改（函数（）{
var maxAllowed=5；
var cnt=$（“输入[name='group_option[]']：选中”）。长度；
如果（cnt>maxAllowed）{
$（this.prop（“选中”和“”）；
}
});
});
函数计数（）{
var计数=0；
如果（$（'#checkbox1'）。是（':checked'））{
计数=计数+1；
}
如果（$（'#复选框2'）。是（':checked'））{
计数=计数+1；
}
如果（$（'#checkbox3'）。是（':checked'））{
计数=计数+1；
}
如果（$（'#复选框4'）。是（':checked'））{
计数=计数+1；
}
如果（$（'#复选框5'）。是（':checked'））{
计数=计数+1；
}
如果（$（'#checkbox6'）。是（':checked'））{
计数=计数+1；
}
如果（$（'#checkbox7'）。是（':checked'））{
计数=计数+1；
}
document.getElementById（“count”）.innerHTML=count+“/5选中”；
}

。选项{
背景色：#e6；
显示：块；
宽度：300px；
左边距：20px；
填充：2px；
边缘底部：1px；
}
.选项：悬停{
颜色：黑色；
光标：指针；
过渡持续时间：.15s；
背景色：#B3；
}
输入{
浮动：左；
}
标签：悬停{
背景色：#bfbf；
}
输入[类型=复选框]：选中+标签{
背景色：#中交；
}

选择0/5




选择1
选择2
选择3
选择4
备选案文5
备选案文6
选项7

答案在您自己代码的第4行

function count() {
    var cnt = $("input[name='group_option[]']:checked").length;
    document.getElementById("count").innerHTML = cnt + "/5 Selected";
}

---

不需要单独的

count（）

函数，因为您可以在jQuery

change

事件处理程序中执行所有必需的处理（并且*上的

事件属性被认为已经过时，无论如何都应该避免）。您已经在那里存储了
cnt
变量，可以使用该变量。试试这个：


$（文档）.ready（函数（）{
var maxAllowed=5；
$（“输入[name='group_option[]']”）。更改（函数（）{
var cnt=$（“输入[name='group_option[]']：选中”）。长度；
如果（cnt>maxAllowed）
$（this）.prop（“选中”，false）；
其他的
$（“#计数”）.text（cnt+”/5选定）；
});
});
。选项{
背景色：#e6；
显示：块；
宽度：300px；
左边距：20px；
填充：2px；
边缘底部：1px；
}
.选项：悬停{
颜色：黑色；
光标：指针；
过渡持续时间：.15s；
背景色：#B3；
}
输入{
浮动：左；
}
输入：选中+标签{
背景色：#中交；
}
输入：选中+标签：悬停{
背景色：#bfbf；
}

0/5已选定


选择1
选择2
选择3
选择4
备选案文5
备选案文6
选项7
由于CSS标签和轶事，这里有一个CSS的可能性：


//这里不需要javascript，它是一个CSS演示
表单{
显示：表格；
}
标签{
显示：块；
左边距：20px；
位置：相对位置；
填充：0.25em 1em 0；
背景：浅灰色；
边缘底部：1px；
}
标签[for^=“checkbox”]：在{/*之后选择用于绘制复选框的标签*/
内容：''；
位置：绝对位置；
右：100%；
显示：内联块；
线高：9px；
高度：11px；
宽度：11px；
边距：2×5×0；
边框：实心1px#999；
盒影：镶嵌0 0 1px白色，镶嵌0 0 1px 1px灰色；
背景：线性渐变（至右下角，灰色，白色75%）
}
/*悬停/选中时更新复选框颜色*/
#checkbox1:checked~label[for=“checkbox1”]：在，
#checkbox2:checked~label[for=“checkbox2”]：在，
#checkbox3:checked~label[for=“checkbox3”]：在，
#checkbox4:checked~label[for=“checkbox4”]：在，
#checkbox5:checked~label[for=“checkbox5”]：在，
#checkbox6:checked~label[for=“checkbox6”]：在，
#checkbox7:checked~label[for=“checkbox7”]：在，
标签：悬停：之后{
边框：实心1px#5586A3；
框阴影：插入0 0 1px白色，插入0 0 2px#9FD7F9；
背景：线性渐变（右下角，#7AB6DB，白色75%）
}
/*是时候隐藏CSS中克隆的输入了*/
[name^=“group_option”]{
位置：绝对位置；
右：100%；
}
/*选中时触发选中标记*/
#checkbox1:checked~label[for=“checkbox1”]：在，
#checkbox2:checked~label[for=“checkbox2”]：在，
#checkbox3:checked~label[for=“checkbox3”]：在，
#checkbox4:checked~label[for=“checkbox4”]：在，
#checkbox5:checked~label[for=“checkbox5”]：在，
#checkbox6:checked~label[for=“checkbox6”]：在，
#checkbox7:选中~label[for=“checkbox7”]：之后{
内容：'\2714'；
颜色：#223C82；
}
/*达到5时不允许选项*/
[name^=“group_option”]：选中~[name^=“group_option”]：选中~[name^=“group_option”]：选中~[name^=“group_option”]：选中~[name^=“group_option”]：选中~~标签{
指针事件：无；
颜色：灰色；
}
/*但是如果你改变了主意，就允许不检查*/
标签：悬停，
#checkbox1:checked~label[for=“checkbox1”]，
#checkbox2:选中~label[for=“checkbox2”]，
#checkbox3:选中~label[for=“checkbox3”]，
#checkbox4:选中~label[for=“checkbox4”]，
#checkbox5:选中~label[for=“checkbox5”]，
#checkbox6:选中~label[for=“checkbox6”]，
#checkbox7:选中~label[for=“checkbox7”]{
指针事件：自动；
颜色：首字母；
背景：灰色；
光标：指针；
}
/*添加信息*/
b{
显示：块；
文本对齐：居中
}
形式{
计数器复位：勾选；