checkbox 最多选两项

<!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>

更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/363613.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

论图计算

自从机械计算开始以来&#xff0c;图形概念就已经存在&#xff0c;并且在纯数学领域已经存在了数十年。 由于数据库的黄金时代&#xff0c;图形在软件工程中变得越来越流行。 图形数据库提供了一种持久化和处理图形数据的方法。 但是&#xff0c;图形数据库并不是存储和分析图形…

注册了

第一天来 转载于:https://www.cnblogs.com/mayanshuang/archive/2008/07/26/1251934.html

html 拼接onmouseout,HTML onmouseout事件用法及代码示例

将鼠标指针移出元素或其子元素时&#xff0c;将发生HTML DOM onmouseout事件。用法:在HTML中&#xff1a;在JavaScript中&#xff1a;object.onmouseout function(){myScript};在JavaScript中&#xff0c;使用addEventListener()方法&#xff1a;object.addEventListener(&quo…

Windows PowerShell Cookbook

Windows PowerShell Cookbook转载于:https://www.cnblogs.com/gavinhughhu/archive/2009/12/29/1634652.html

7 selenium 模块

selenium 模块 一.简介 1.Python的一个第三方库&#xff0c;对外提供的接口可以操作浏览器&#xff0c;然后让浏览器完成自动化的操作。 2.自动化测试工具,而爬虫中使用它主要是为了解决requests无法直接执行JavaScript代码的问题 selenium本质是通过驱动浏览器&#xff0c;完全…

vue-resource

安装npm install vue-resource引入import VueResource from vue-resource;Vue.use(VueResource);使用get方法this.$http.get("http://localhost/test.php").then( function (res) { // 处理成功的结果 console.log(res.body); },function (res) { // 处理失败的结果 …

针对新手的Java EE7和Maven项目-第3部分-定义ejb服务和jpa实体模块

从前面的部分恢复 第1部分 第2部分 我们在第三部分继续介绍&#xff0c;我们已经有一个父pom&#xff0c;并且已经为我们的war模块定义了pom。 在我们的原始设置中&#xff0c;我们定义了我们的应用程序将包含一个ejb jar形式的服务jar。 这是我们的Enterprise Java Bean&…

计算机本地网络如何共享,本地网络共享怎么实现

本地网络共享可以满足多台电脑同时联网&#xff0c;台式电脑实现网络共享可以使用路由器&#xff0c;笔记本电脑事项网络共享需要使用无线路由器或者无线网卡。那么本地网络共享又是如何实现的呢&#xff0c;下面为大家详细介绍一下。通过路由器实现本地网络共享&#xff1a;第…

淘宝购物车效果

淘宝购物车效果 今天给大家带来的是淘宝购物车效果&#xff0c;写的不怎么好&#xff0c;请大家多多指教。 效果&#xff1a; 1.点击全选前的选择框&#xff0c;选择所有的选择框。 2.点击商品的加号或者减号可以改变商品的数量值&#xff0c;并且改变商品的小计和他的积分&…

Git初始化配置以及配置github

1&#xff0c;配置用户名和邮箱&#xff08;这里是我github中配置的用户名和邮箱&#xff09;&#xff0c;执行下面命令后&#xff0c;在C:\Users\yaosq盘下会出现一个全局文件.gitconfig. git config --global user.name "这里换上你的用户名" git config --global…

大学计算机专业高考听力,高考英语听力测试对考生听力策略反拨作用的研究

摘要&#xff1a;高考是我国高等院校招生的全国统一性考试,高考听力测试作为听力测试一部分主要测试高考考生的英语听力能力是否达到高校招生的选拔要求.在2011年,有933余万考生参加了高考,其中山东省参加高考的考生约59万人.作为一项全国性选拔考试,高考对我国的中学教育具有重…

网上找工作秘籍(3)

Do your New Years resolutions include finding a new job? The Internet is a great resource for job seekers. But far too many people dont use it effectively. 你今年的新年愿望中有找一份新工作吗&#xff1f;互联网是求职者可以利用的一大资源&#xff0c;但是很多人…

数据知识栈

并发不适合胆小者 我们都知道并发编程很难正确实现。 这就是为什么在执行线程任务之后要进行大量的设计和代码审查会议。 您永远不会将并发问题分配给经验不足的开发人员。 仔细分析问题空间&#xff0c;提出设计&#xff0c;并记录和审查解决方案。 这就是通常处理线程相关任…

Docker Swarm 常用命令

# 管理配置文件docker config # 查看已创建配置文件 - docker config ls # 将已有配置文件添加到docker配置文件中 - docker config create docker 配置文件名 本地配置文件# 管理swarm节点docker node # 查看集群中的节点 - docker node ls # 将manager角色降级为wor…

单点登录

单点登录&#xff1a;是指在多系统应用群中登录一个系统&#xff0c;便可在其他所有系统中得到授权而无需再次登录&#xff0c;包括单点登录与单点注销两部分 1、获取登录页面的表单信息&#xff1a; 用户名&#xff0c;密码等&#xff0c; eg:  var username document.ge…

我的GMAIL下蛋了,要的请留下姓,名和email!!

如果要的请留下First Name,Last Name,Email!先来先得&#xff0c;发完为止&#xff01;转载于:https://www.cnblogs.com/xiali/archive/2004/09/20/44731.html

微型计算机用什么评价判断,环评中常用评价等级的判定

环评中常用评价等级的判定环评就是分析项目建成投产后可能对环境产生的影响&#xff0c;并提出污染防治对策和措施。那么环评中常用评价等级的判定有哪些呢?一、生态影响评价工作等级划分表影响区域生态敏感性工程占地(水域)范围面积≥20km2或长度≥100km面积2km2&#xff5e;…

客服顾问的工具箱--走出软件作坊:三五个人十来条枪 如何成为开发正规军(六)[转]...

这段时间&#xff0c;写完了项目经理的工具箱---走出软件作坊&#xff1a;三五个人十来条枪 如何成为开发正规军&#xff08;三&#xff09; 、实施经理的工具箱--走出软件作坊&#xff1a;三五个人十来条枪 如何成为开发正规军&#xff08;五&#xff09;。于是想一气呵成&…

Spring Boot:快速启动MVC

我打算一年多以前写一篇关于Spring Boot的文章。 最后&#xff0c;我有时间和灵感。 因此&#xff0c;准备10到15分钟的高质量Spring教程。 我将用Gradle和嵌入式Tomcat演示Spring Boot的基础知识。 我使用Intellij IDEA而不是Eclipse&#xff0c;但是对于那些习惯Eclipse的人来…

opengl库区分:glut、freeglut、glfw、glew、gl3w、glad

//oepngl库 opengl原生库 gl* 随opengl一起发布 opengl实用库 glu* 随opengl一起发布 opengl实用工具库glut glut* 需要下载配置安装(太老了&#xff01;) opengl实用工具库开源版本freeglut glut* 需要下载配置安装(完全兼容glut&#xff0c;算是glut的代替品&#xff0c;但是…