<!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. 洛谷P2826 LJJ的数学课

    题目背景 题目描述(本题是提高组第二题难度+) 题目描述 \(LJJ\)又要开始上数学课啦!(\(T1\),永恒不变的数学) \(LJJ\)的\(Teacher\)对上次的考试很不满意(其实是出题人对 ...

  2. thinkphp5.1跨模块调用控制器或者模型

    tp5.1 采用命名空间的方式进行调用.

  3. 自动化测试资源（一)：谷歌浏览器驱动 ChromeDriver

    ChromeDriver(官网):https://sites.google.com/a/chromium.org/chromedriver/ (需要XX上网,官网里有驱动和浏览器的版本映射关系) (如 ...

  4. Chapter12

    package scalaimport java.awt.event.{ActionEvent, ActionListener}import javax.swing.JButton import sc ...

  5. 【手撸一个ORM】第七步、SqlDataReader转实体

    说明 使用Expression(表达式目录树)转Entity的文章在园子里有很多,思路也大致也一样,我在前面有篇文章对解决思路有些说明,有兴趣的小伙伴可以看下 (传送门),刚接触表达式目录树时写的,不 ...

  6. Aspose.cell生成表格

     public void ExportQueryPrj(HttpContext context)         {              //接受前端传递参数和数据             st ...

  7. java环境安装(win7)

    首先,你应该已经安装了 java 的 JDK 了,笔者安装的是:jdk-7u13-windows-x64 接下来主要讲怎么配置 java 的环境变量,也是为了以后哪天自己忘记了做个备份 1.进入&qu ...

  8. TemplateBinding与Binding区别，以及WPF自定义控件开发的遭遇

    在上一次的文章WPF OnApplyTemplate 不执行 或者执行滞后的疑惑谈到怎么正确的开发自定义控件,我们控件的样式中,属性的绑定一般都是用TemplateBinding来完成,如下一个基本的 ...

  9. webpack.config.js====CSS相关：插件optimize-css-assets-webpack-plugin

    1. 安装:主要是用来压缩css文件 cnpm install --save-dev optimize-css-assets-webpack-plugin cssnano 2. webpack.con ...

  10. personalWebsite_1:历史记录汇总

    最开始,根据  https://blog.csdn.net/zbl1146556298/article/details/79714239 进行网站构思设计,根据源码, 1.把gradle项目转为mav ...