<!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. À peu près là 技术支持

    À peu près là 技术支持   技术支持网址:有问题或建议请留言. 邮箱地址: metlersaiddqr@zoho.com Program design & system cons ...

  2. 洛谷 P2024 [NOI2001]食物链 （并查集）

    嗯... 题目链接:https://www.luogu.org/problemnew/show/P2024 这道题和团伙这道题的思想比较类似,都是一个数组分成几个集合,但这道题的思路更加混乱,建议没做 ...

  3. giihub上的关于js的43道题目

    参考 https://github.com/lydiahallie/javascript-questions

  4. 将Python的.py文件转变为可执行文件.exe

    python是个很强大的工具,但我们生成的.py文件在没有Python环境下运行就需要转为.exe文件,我使用的是PyInstaller 1.安装PyInstaller: pip install Py ...

  5. BZOJ4552（二分+线段树）

    要点 序列是n个不同的数,则新学到的一种策略就是二分这个位置的答案,然后可以上下调. 神奇地只关注大于还是小于mid并赋值0.1,这样m个操作的排序就能用线段树维护了! #include <cs ...

  6. P1977 出租车拼车（DP)

    题目背景 话说小 x 有一次去参加比赛,虽然学校离比赛地点不太远,但小 x 还是想坐 出租车去.大学城的出租车总是比较另类,有“拼车”一说,也就是说,你一个人 坐车去,还是一堆人一起,总共需要支付的钱 ...

  7. (转)Linux修改eth2到eth0（70-persistent-net.rules）

    之前在公司提供的虚拟机器上面,一直有个问题用着很不舒服,为什么它的IP选择的设备的eth2的,但是我在/etc/sysconfig/network-scrpts/下面也没有找到ifcfg-eth2的配 ...

  8. 利用rand7()构造rand10()

    题意 已知有个rand7()的函数,返回1到7随机自然数,让利用这个rand7()构造rand10() 随机1~10 参考代码 int rand7() { srand((int)time(NULL)) ...

  9. windows 2012 r2 x64 安装IIS注意事项

    详细安装可以参考下面; https://jingyan.baidu.com/article/93f9803f234eade0e46f559f.html 下面只说一些注意事项,如果项目要用到wcf 的话 ...

  10. [JQuery] Using skill in JQuery

    Using skill of JQuery 获取兄弟节点 $('#id').siblings() 当前元素的所有兄弟节点 $('#id').prev() 当前元素的前一个兄弟节点 $('#id').p ...