js判断checkbox状态,处理表单提交事件
功能描述:手机网页需要一个投票功能,通过form的post提交。有5-20个checkbox选项,至少选一项,至多选三项。需要在用户点击提交按钮前,判断checkbox的状态是否符合条件,符合则提交到后台,不符合弹窗提示。
效果图:

js代码:
<script>
function Check(){
var cbs = document.getElementsByTagName("input");
var b = false;
var count = 0;
for(var i=0;i<cbs.length;i++){
if(cbs[i].type == "checkbox" && cbs[i].checked){
b = true;
count++;
}
}
if(!b){
alert("请至少选择一项!");
return false;
}
if(count>3){
alert("最多选择三项!");
return false;
}
}
$(document).ready(function(){
$("form").submit(function(e){
return Check();
});
});
</script>
表单代码:
<form name='voteform' method='post' action='/php/vote.php' target='_blank'>
<input type='hidden' name='dopost' value='send' />
<input type='hidden' name='aid' value='4' />
<input type='hidden' name='ismore' value='1' />
<tr align='center'><td height='22' id='votetitle' style='border-bottom:1px dashed #999999;color:#3F7652' ><strong>6月4周投票</strong></td></tr>
<tr><td height=22 bgcolor=#FFFFFF style='color:#666666'><input type=checkbox name='voteitem[]' value='1' />关注 | 港区一女子遭遇现实版《不要和陌生人说话》</td></tr>
<tr><td height=22 bgcolor=#FFFFFF style='color:#666666'><input type=checkbox name='voteitem[]' value='2' />警情|每周治安播报 公安机关办案让你汇款?绝对骗子!</td></tr>
<tr><td height=22 bgcolor=#FFFFFF style='color:#666666'><input type=checkbox name='voteitem[]' value='3' />防范 | 那些年我们见过的“高考陷阱”,不得不防哦!</td></tr>
<tr><td height=22 bgcolor=#FFFFFF style='color:#666666'><input type=checkbox name='voteitem[]' value='4' />提醒 | 家长们注意了:最近别嘴对嘴亲吻孩子!这种病</td></tr>
<tr><td height=22 bgcolor=#FFFFFF style='color:#666666'><input type=checkbox name='voteitem[]' value='5' />防范 | 网警通知:收到这些短信统统不要点!</td></tr>
<tr><td height='22'>
<input type='submit' class='btn-1' name='vbt1' value='投票' />
<input type='button' class='btn-1' name='vbt2' value='查看结果' onClick=window.open('/php/vote.php?dopost=view&aid=4'); /></td></tr>
</form>
js判断checkbox状态,处理表单提交事件的更多相关文章
- 在客户端先通过JS验证后再将表单提交到服务器
问题:想要在客户端先通过JS验证后再将表单提交到服务器 参考资料: jQuery 事件 - submit() 方法 试验过程: 服务器端使用PHP <html> <head> ...
- koa 基础(十)原生node.js 在 koa 中获取表单提交的数据
1.app.js // 引入模块 const Koa = require('koa'); const router = require('koa-router')(); /*引入是实例化路由 推荐*/ ...
- 20181019 记录 window.setTimeout('dofunction()',2000); - layui form 表单提交 事件 - F11全屏 事件 window.onresize
1 延时事件 window.setTimeout('dofunction()',2000); 函数外面要有引号 如果没有引号 就不能延时执行 应该是内容进行eval,所以外层不是传递字符串的话,外层函 ...
- js控制页面显示和表单提交
早期的web页面在显示方面一般在后台进行控制,虽然对后台开发来讲是比较容易做到的,但是涉及到一个问题,那就是数据库压力. 因为要控制显示,所以会比较频繁的从数据库中来回调用. 现在的js功能越来越强, ...
- 按钮js跳转到非表单提交页
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- JS 无限长form表单提交
1 简介 开发时候,总会遇到根据后台传的变量{组件数}来动态渲染组件的情况,比如后台传命令要绑定10个父子关系,则前台展开十个input组件,后台决定绑定5个福字关系,则前台展开5个input组件.再 ...
- JS判断form内所有表单是否为空
function checkForm(){ var input_cart=document.getElementsByTagName("INPUT"); for(var i=0 ...
- JS表单提交的几种方式
第一种方式 : 表单提交,在 form 标签中增加 onsubmit 事件来判断表单是否提交成功 <script type="text/javascript"> fun ...
- 黄聪:Pjax无刷新跳转页面实现,支持超链接与表单提交
什么是pjax? 当你点击一个站内的链接的时候,不是做页面跳转,而是只是站内页面刷新.这样的用户体验,比起整个页面都闪一下来说, 好很多. 其中有一个很重要的组成部分, 这些网站的ajax刷新是支持浏 ...
随机推荐
- Jexus-5.6.3使用详解
一.Jexus Web Server配置 在 jexus 的工作文件夹中(一般是"/usr/jexus")有一个基本的配置文件,文件名是"jws.conf".j ...
- C# 向IQueryable添加一个Include扩展方法
using System; using System.Data.Objects; using System.Linq; namespace OutOfMemory.Codes { /// <su ...
- tomcat的文件路径 servelet的配置 以及maven中的WEB-INF的路径
Tomcat JavaWeb应用的组成结构 开发JavaWeb应用时,不同类型的文件有严格的存放规则,否则不仅可能会使web应用无法访问,还会导致web服务器启动报错 WebRoot →Web应用所在 ...
- mssql手工注入
判断注入点: 1.数字型 http://www.targer.com/article.aspx?id=1 http://www.targer.com/article.aspx?id=1' http:/ ...
- Effective Objective-C 2.0 — 第七条:在对象内部尽量直接访问实例变量
直接访问实例变量,不经过”方法派发“(method dispatch) 速度快. 直接访问实例变量,不会调用其“设置方法”,这就绕过了为相关属性所定义的“内存管理语义”. 直接访问实例变量,不会触发“ ...
- LINUX命令总结 -------来自 水滴娃娃 的CSDN
LINUX命令总结 标签: LINUX命令总结 2014-01-27 15:54 41039人阅读 评论(1) 收藏 举报 分类: linux(1) 版权声明:本文为博主原创文章,未经博主允许不得 ...
- 关于 jquery 选择器的 深入理解 -1
多级选择器: 前面一个selector1, 后面通过 //空格, >, + ~, 各种筛选 选择器 + selector2 // 再次进行选择的,就叫做多级选择器 jquery的一个基本常识: ...
- php 关于时区 date gmdate date_default_timezone_set/get 终极答疑
关于GMT和UTC时间? GMT+0800 Greenwich: [gri:nitf], 格林威治/格林尼治.是英国伦敦泰晤士河附近的一个小镇 Mean: adj. 自私的; n. 平均.. he i ...
- JAVA浅析字节流与字符流
[概括] 字节流是通用的,既可以操作图片又可以操作文本,但一般都用于操作图片.字符流是基于字节流的,因为字符流内部融合编码表,所以用来操作文本. 1.在字节输入流中能根据文件的大小来开辟数组空间 Fi ...
- Tomcat 6 —— Realm域管理
本篇来源于官方文档,但不仅仅是翻译,其中不乏网上搜索的资料与自己的理解. 如有错误,请予指正. 什么是Realm 首先说一下什么是Realm,可以把它理解成“域”,也可以理解成“组”,因为它类似 类U ...