Make a check box with JavaScript

When we are making questionnaires, we tend to limit the number of users ' selection check boxes, elephant This example requires users to select three of nine sites (see below) that the best site, which requires users to choose the number of sites can not be greater than 3, of course, in the background through the program to control, but that is slow and complex, Using JavaScript program in the client direct control is fast and convenient, in the effect of this example, once the number of sites selected more than 3, will immediately pop-up a prompt window, telling you to select the number of sites can not exceed 3.

The method of producing this example is as follows:

1. Make a form that contains a check box. The name parameter of all checkboxes is uniform, and is differentiated by ordinal for program invocation. The check box name for this example is: C1, C2, c3......c9.

2, the following section of the program inserted between

<script language="Javascript">
<!--
var checkboxname = "c"; //复选框名称的前缀，所有复选框的名称要统一，用序号区分。
var MaxCheckbox = 9; //复选框的个数，本例有9个，可根据需要变动。
var MaxSelected = 3; //设置最大允许选择的数量，可根据需要变动。
var Num = 0; //声明一个变量，用于存放已选的数量。
function mycheck(ctrl) { //控制选择数量的函数。
var nowCtrl; //当前复选框。
Num = 0; //统计数归零。
var i;
i = 1;
while ((i <= MaxCheckbox) && (Num <= MaxSelected)) { //循环检测已选中的复选框数量。
nowCtrl = eval("ctrl.form." + checkboxname + i);
if ((nowCtrl.checked)) { //如果已被选中，则计算器加1。
Num++;
}
i++;
}
if (Num > MaxSelected) { // 检查是否已超过了最大选择数量；
ctrl.checked = false; //如果已超过允许的最大选择数量，则取消增加的选择并弹出提示窗口。
alert("你已选择了三个网站！只有取消（再次点击）已选网站才能选其它网站。");
}
}
// -->
</script>

In the reference to this program to make a form to note the name of each check box, the program defaults to: C1, C2, c3......c9. If you use a different name, the program: var checkboxname = "C" in the "C" to your actual name prefix, but the following sequence number must start from 1 and to continuous, otherwise the program will be modified.

3. Add one of the tags in each check box: onclick= "MyCheck (This)" To invoke this JavaScript program, so that each time you click the check box to use the program to detect the number of selected check boxes and to determine whether the number of restrictions exceeded. The Completed check box code is as follows (for space only, three for demonstration):

<input type= "checkbox" Name= "C1" value= "onclick=" MyCheck "(This)" > Information

<input type= "checkbox" name= "C2" value= "onclick=" "MyCheck" (this) > consulting

<input type= "checkbox" Name= "C3" Value= "to" onclick= "MyCheck" (this) > investment

This is done, you can see the expected effect in the browser. What if we ask the user to select three websites to submit? In fact, it is very simple to add the following detection function to the program: Cnasubmit (), the code is as follows:

function Cansubmit () {//Select whether the number of Web sites meets the requirements detection functions.

if (num<maxselected)//If the number of sites you have selected does not meet your requirements, pop-up the prompt box.

Alert ("You have only selected the" +num+ "site, you need to select" + (maxselected-num) + "a website to submit, thank you for your cooperation! ");

}

Then add an event in the tag of the Submit menu button: onclick= "Cnasubmit ()" To invoke the detection program, if not meet the required number of choices, pop-up a prompt box, and in the prompt box to display the number of selected sites and also increased the number of selected sites, you see, This is not more close to the user some.