<!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. kubernetes（安装dashboard）

    https://blog.csdn.net/qq_22917163/article/details/84527420 1. 通过yaml文件安装dashboard 我们可以从https://githu ...

  2. 3、kvm配置vnc

    配置kvm通过vnc访问 virsh edit privi-server 添加如下配置: <graphics type='vnc' port='5901' autoport='no' liste ...

  3. 洛谷2018寒假集训tg第二次比赛第二题Princess Principal题解

    这算不算泄题啊...被kkk发现会咕咕咕吧. 题目大意:给定一个数列a,与常数n,m,k然后有m个询问,每个询问给定l,r.问在a[l]到a[r]中最少分成几段,使每段的和不超过k,如果无解,输出Ch ...

  4. jap的教程

    第一个资料:   https://wenku.baidu.com/view/5ca6ce6a1eb91a37f1115cee.html 第二个资料 :http://www.yiibai.com/jpa ...

  5. linux读取yaml文件的某个属性值

    trigger=$(cat test.yaml | grep "trigger" | awk '{print $2}') 该条命令的意思是:读取test.yaml文件中的trigg ...

  6. JavaScript 给表格排序

    (function(){ var mTable=document.getElementById('table'); var sort=function(el,index,desc){ var mTbo ...

  7. HDU - 4366 Successor DFS序 + 分块暴力 or 线段树维护

    给定一颗树,每个节点都有忠诚和能力两个参数,随意指定一个节点,要求在它的子树中找一个节点代替它,这个节点要满足能力值大于它,而且是忠诚度最高的那个. 首先,dfs一下,处理出L[i], R[i]表示d ...

  8. UnityError 切换场景灯光变黑问题解决

    编辑器在当前场景时,它的灯光是已经渲染好了,但重新加载的时候灯光没有进行渲染 解决方法如下: Window>>lighting>>Scene面板>>右下角build ...

  9. Python中的集合类型分类和集合类型操作符解析

    集合类型    数学上,把set称作由不同的元素组成的集合,集合(set)的成员通常被称作集合元素(set elements).    Python把这个概念引入到它的集合类型对象里.集合对象是一组无 ...

  10. IoC和AOP使用扩展。。。

    实现依赖的多种方式. 1.理解构造注入. 2.掌握使用p命名空间实现属性注入. 3.理解不同的数据类型的注入方式. 4.如何通过构造注入为业务类注入所依赖的数据访问层对象,实现保存用户数据功能. 5. ...