search

Home >Web Front-end >JS Tutorial >JavaScript method to determine the number of selected checkboxes in a form_javascript skills

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

WBOY
WBOYOriginal
2016-05-16 15:44:441397browse

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>

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

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：jQuery slideshow with thumbnail carousel effect code sharing_jqueryNext article：jQuery slideshow with thumbnail carousel effect code sharing_jquery

Related articles

See more