JavaScript method to determine the number of selected checkboxes in a form

JavaScript method to determine the number of selected checkboxes in a form_javascript skills

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Release： 2016-05-16 15:44:44

Original

1449 people have browsed it

The example in this article describes how to use JavaScript to determine the number of checkboxes selected in a form. Share it with everyone for your reference. The details are as follows:

JavaScript is used here to detect and determine the number of selected multi-select boxes in the form, that is, how many checkboxes are selected. In the past, this question was often asked by major forums, because detecting checkboxes is not as good as detecting input boxes. It is simple, especially judging the number is often encountered, so I think this Js code is still very useful. If you are interested, you can improve it.

The operation effect is as shown below:

The online demo address is as follows:

http://demo.jb51.net/js/2015/js-checkbox-chk-num-codes/

The specific code is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>检测表单多选框的选择个数</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
</head>
<body>
<script language="javascript">
<!--
function anyCheck(form) {
var total = 0;
var max = form.ckbox.length;
for (var idx = 0; idx < max; idx++) {
if (eval("document.playlist.ckbox[" + idx + "].checked") == true) {
  total += 1;
  }
}
alert("您选择了 " + total + " 个选项！");
}
//-->
</script>
<form method="post" name="playlist">
1<input type="checkbox" name="ckbox" value="1">
2<input type="checkbox" name="ckbox" value="2">
3<input type="checkbox" name="ckbox" value="3">
4<input type="checkbox" name="ckbox" value="4">
5<input type="checkbox" name="ckbox" value="5">
6<input type="checkbox" name="ckbox" value="6">
<br><input type="button" value="检测选择个数" onClick="anyCheck(this.form)">
</form>
</body>
</html>

Copy after login

I hope this article will be helpful to everyone’s JavaScript programming design.