<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>久信臻氏</title>
</head>
<body>
<form action="index.php" method="post">
    <div>
        <label for="">姓名：</label>
        <input type="text"  name="user" id="user">
    </div>
    <div>
        <label for="">电话：</label>
        <input type="text"  name="tel" id="tel">
    </div>
    <div>
        <label for="">面膜：</label><small>(最多选两项)</small><br>
        <input type="checkbox" value="1" name="mask[]" class="mask">11111<br>
        <input type="checkbox" value="2" name="mask[]" class="mask">22222<br>
        <input type="checkbox" value="3" name="mask[]" class="mask">33333<br>
        <input type="checkbox" value="4" name="mask[]" class="mask">44444<br>
        <input type="checkbox" value="5" name="mask[]" class="mask">55555<br>
        <input type="checkbox" value="6" name="mask[]" class="mask">66666<br>
    </div>
    <div>
        <input id="submit" type="submit" value="提交">
    </div>
</form>
</body>
<script>
    window.onload=function(){
        var user=document.getElementById("user");
        var tel=document.getElementById("tel");
        var submit=document.getElementById("submit");
        var mask=document.getElementsByClassName("mask");
        var maskarr=[];
        for(var i=0;i<mask.length;i++){
            mask[i].onclick=function () {
                var i=n=0;
                var th=this;
                if(th.checked == true)
                {
                    maskarr.push(th);
                    if(maskarr.length > 2){
                        maskarr[0].checked = false;
                        maskarr.shift();
                    }
                }else{
                    if(maskarr.length>1){
                        for(var i=0; i<maskarr.length; i++){
                            if(th == maskarr[i]) maskarr.splice(i,1);
                        }
                    }else{
                        th.checked = true;
                        return false;
                    }
                }
            }
        }
        submit.onclick=function () {
            if(!user.value){
                alert('姓名没有填写！');
                return false;
            }else if(!tel.value){
                alert('电话没有填写！');
                return false;
            }else if(!maskarr.length){
                alert('选项至少选择一项！');
                return false;
            }else{
            if(tel.value.length==11){
                var reg =/^[0-9]*$ /;
                if (!reg.test(tel.value)) {
                    alert("请输入正确手机号码！");
                    return false;
                }
                return true;
            }
                alert("请输入正确手机号码！");
                return false;
            }
        }
    }
</script>
</html>

checkbox 最多选两项的更多相关文章

  1. JS判断checkbox至少选择一项

    function Check() { if(checkboxs("checkboxname") == false){ // checkboxname: checkbox的名字 al ...

  2. jquery判断checkbox最多选几个

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  3. js效果-多选只能选两项,如果超出自动取消第一次选的

    这个效果很有意思,个人觉得难点在于点击选中状态的多选的数组操作,以下是代码,感谢落梨 <!DOCTYPE> <html> <head> <title> ...

  4. CheckBox只选择一项

    最近做一个问卷的页面,客户那边说要使用checkbox而且只能选择一项 就写了下面的代码 <html xmlns="http://www.w3.org/1999/xhtml" ...

  5. ----------jqery和js如何判断checkbox是否选中 --------两个单选按钮如何选一个，且用jquery获取被选的值

    jqery和js如何判断checkbox是否选中 jquery: <div id="divId" class="divTable"> <div ...

  6. 关于Winform下DataGridView中实现checkbox全选反选、同步列表项的处理

    近期接手一个winform 项目,虽然之前有.net 的经验,但是对一些控件的用法还不是很熟悉. 这段时间将会记录一些在工作中遇到的坎坷以及对应的解决办法,写出来与大家分享并希望大神提出更好解决方法来 ...

  7. 检查radio/checkbox是否至少选择一项

    //---------------------------------------------------------- // 功能:检查radio/checkbox是否至少选择一项 // 参数: / ...

  8. 通过编写串口助手工具学习MFC过程——（五）添加CheckBox复选框

    通过编写串口助手工具学习MFC过程 因为以前也做过几次MFC的编程,每次都是项目完成时,MFC基本操作清楚了,但是过好长时间不再接触MFC的项目,再次做MFC的项目时,又要从头开始熟悉.这次通过做一个 ...

  9. 限定checkbox最多选中数量

    一.概述: checkbox是我们在编写网页的时候经常使用的多选框,但是有些时候我们会限定最多选中的数量,如何限定呢? 下面这例子限定了最多选中两个元素,并且将这两个选中的源依次显示在一个文本框里: ...

随机推荐

  1. Eclipse下tomcat输出路径配置

    在Eclipse下配置server为Tomcat(一般为Tomcat 6.X),双击server面板中的Tomcat v6.0 Server,出现的Server Locations配置有三个选项: 1 ...

  2. 提升Exadata 计算节点本地IO性能

    1.问题概述 某客户有一台Exadata X2-2,每个计算节点是4块普通的本地SAS硬盘做成的RAID5,然后在RAID5的本地硬盘上创建了一个文件系统来存放DSG数据同步软件,在后续的运维过程中, ...

  3. LDAP相关操作注意事项

    lc.Modify(entry.DN, new LdapModification(LdapModification.REPLACE, new LdapAttribute("mDBUseDef ...

  4. AngularJs页面跳转

    同一页面之间的跳转: $state.go('station.booking'); 打开新页面的跳转方式: var url = $state.href("knowledge.questiond ...

  5. JS——两个原生选择器

    1. document.querySlector() 2.document.querySlectorAll() <!DOCTYPE html> <html lang="en ...

  6. scau 8616 汽车拉力比赛

          上次我们过了二分图的最佳匹配,现在我们看一道题目,经典的二分图的最佳匹配题目 8616 汽车拉力比赛 时间限制:500MS  内存限制:1000K提交次数:71 通过次数:24 题型: 编 ...

  7. nginx去掉url中的index.php

    使用情境:我想输入www.abc.com/a/1后,实际上是跳转到www.abc.com/index.php/a/1 配置Nginx.conf在你的虚拟主机下添加: location / {      ...

  8. Shell笔试题1

    1．用Shell编程,判断一文件是不是块或字符设备文件,如果是将其拷贝到 /dev 目录下. #!/bin/bash#1.sh#判断一文件是不是字符或块设备文件,如果是将其拷贝到 /dev 目录下#f ...

  9. c# 类成员的定义 定义方法、字段和属性【转】

    c# 类成员的定义 定义方法.字段和属性c#类的成员包括字段.属性和方法.所有成员都有自己的访问级别,用下面的关键字之一来定义:public----成员可以有任何代码访问:private----成员只 ...

  10. Get和Post的请求

    get post请求 <form method="post","get", action="a.ashx"> <input ...