<!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. idea中使用Git对项目进行版本控制

  2. java中静态代码块的用法 static用法详解和static静态导入

    (一)java 静态代码块 静态方法区别一般情况下,如果有些代码必须在项目启动的时候就执行的时候,需要使用静态代码块,这种代码是主动执行的;需要在项目启动的时候就初始化,在不创建对象的情况下,其他程序 ...

  3. jcmd jmap应用：一个String经典笔试题的验证

    笔试题: String strA = new String("123123");这一行中创建了几个String对象?? public class StringHeapCountTe ...

  4. 019 Remove Nth Node From End of List 删除链表的倒数第N个节点

    给定一个链表,删除链表的倒数第 n 个节点并返回头结点.例如,给定一个链表: 1->2->3->4->5, 并且 n = 2.当删除了倒数第二个节点后链表变成了 1->2 ...

  5. 整理一下postgresql的扩展功能postgis和pgrouting的使用

    postgis windows的下的安装使用postgresql的bin目录下的stackbuiler Ubuntu14.04下的安装: apt-get install postgresql-9.3- ...

  6. Zookeeper启动失败：java.net.BindException: Address already in use

    错误日志如下: [hadoop@master zookeeper-3.4.5-cdh5.10.0]$ cat zookeeper.out 2018-05-15 01:29:21,036 [myid:] ...

  7. Toad for Oracle针对于Oracle数据库的可视化管理工具使用

    Toad for Oracle安装包下载地址:http://pan.baidu.com/s/1mgBOLZU 在Oracle应用程序的开发过程中,访问数据库对象和编写SQL程序是一件乏味且耗费时间的工 ...

  8. android 开发-(Contextual Menu)上下文菜单的实现

    在android3.0以后,安卓设备不在提供物理的菜单按键,同时,android应用提供了另外的菜单实现机制,来替代之前的菜单创建方式.安卓设备中,平常可以使用长按住某个内容弹出菜单选项.这就是我们需 ...

  9. js 限制文本框不能输入单引号

    <input onkeydown="if(event.keyCode==32||event.keyCode==188||event.keyCode==222){return false ...

  10. CentOS 6.2安装nagios

    nagios分为监控机和被监控机两类机器      监控主机:gserver150(192.168.111.150) 被监控主机:gserver151(192.168.111.151)   一.  监 ...