功能描述:手机网页需要一个投票功能,通过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状态,处理表单提交事件的更多相关文章

  1. 在客户端先通过JS验证后再将表单提交到服务器

    问题:想要在客户端先通过JS验证后再将表单提交到服务器 参考资料: jQuery 事件 - submit() 方法 试验过程: 服务器端使用PHP <html> <head> ...

  2. koa 基础(十)原生node.js 在 koa 中获取表单提交的数据

    1.app.js // 引入模块 const Koa = require('koa'); const router = require('koa-router')(); /*引入是实例化路由 推荐*/ ...

  3. 20181019 记录 window.setTimeout('dofunction()',2000); - layui form 表单提交 事件 - F11全屏 事件 window.onresize

    1 延时事件 window.setTimeout('dofunction()',2000); 函数外面要有引号 如果没有引号 就不能延时执行 应该是内容进行eval,所以外层不是传递字符串的话,外层函 ...

  4. js控制页面显示和表单提交

    早期的web页面在显示方面一般在后台进行控制,虽然对后台开发来讲是比较容易做到的,但是涉及到一个问题,那就是数据库压力. 因为要控制显示,所以会比较频繁的从数据库中来回调用. 现在的js功能越来越强, ...

  5. 按钮js跳转到非表单提交页

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. JS 无限长form表单提交

    1 简介 开发时候,总会遇到根据后台传的变量{组件数}来动态渲染组件的情况,比如后台传命令要绑定10个父子关系,则前台展开十个input组件,后台决定绑定5个福字关系,则前台展开5个input组件.再 ...

  7. JS判断form内所有表单是否为空

    function checkForm(){ var input_cart=document.getElementsByTagName("INPUT"); for(var   i=0 ...

  8. JS表单提交的几种方式

    第一种方式 : 表单提交,在 form 标签中增加 onsubmit 事件来判断表单是否提交成功 <script type="text/javascript"> fun ...

  9. 黄聪:Pjax无刷新跳转页面实现,支持超链接与表单提交

    什么是pjax? 当你点击一个站内的链接的时候,不是做页面跳转,而是只是站内页面刷新.这样的用户体验,比起整个页面都闪一下来说, 好很多. 其中有一个很重要的组成部分, 这些网站的ajax刷新是支持浏 ...

随机推荐

  1. 用淘宝ip地址库查ip

    这是一个通过调用淘宝ip地址库实现ip地址查询的功能类 using System; using System.Collections.Generic; using System.Linq; using ...

  2. LINQ的左连接、右连接、内连接

    .左连接: var LeftJoin = from emp in ListOfEmployees join dept in ListOfDepartment on emp.DeptID equals ...

  3. AWK命令的用法

    1.awk命令简介: awk是一种可以处理数据.产生格式化报表的语言,功能十分强大. awk的工作方式是读取数据,将每一行数据视为一条记录(record)每笔记录以字段分隔符分成若干字段,然后输出各个 ...

  4. 缓存 HttpContext.Current.Cache和HttpRuntime.Cache的区别

    先看MSDN上的解释: HttpContext.Current.Cache:为当前 HTTP 请求获取Cache对象. HttpRuntime.Cache:获取当前应用程序的Cache.  我们再用. ...

  5. Orchard源码分析(1):Orchard架构

      本文主要参考官方文档"How Orchard works"以及Orchardch上的翻译.   源码分析应该做到庖丁解牛,而不是以管窥豹或瞎子摸象.所以先对Orchard架构有 ...

  6. java.util.ResourceBundle使用详解

    java.util.ResourceBundle使用详解   一.认识国际化资源文件   这个类提供软件国际化的捷径.通过此类,可以使您所编写的程序可以:          轻松地本地化或翻译成不同的 ...

  7. Linux操作、hadoop和sh脚本小结

    近期一直在忙项目上的事情,今天对以前的工作做一个简单的小结.明天就是国庆节啦. 1  脚本可以手动执行,可是crontab缺总是找不到路径? #!/bin/bash. /etc/profile . / ...

  8. JavaScript 学习笔记 -- Function

    JS 中 函数.继承.闭包.作用域链... 一直都是硬伤,一碰到这样的问题头就大了.但是如果我继续着说:我不会,就真的无药可救了.要勇敢地说出:我的字典里就没有不会这个词,吼吼..正好昨天在书城里看了 ...

  9. webpack入门(一)——webpack 介绍

    如今的网站正在演化为web应用程序: 1. 越来越多的使用JavaScript. 2. 现代浏览器提供更广泛的接口. 3. 整页刷新的情况越来越少,甚至更多代码在同一个页面.(SPA) 因此有很多代码 ...

  10. 系统研究Airbnb开源项目airflow

    开源项目airflow的一点研究 调研了一些几个调度系统, airflow 更满意一些. 花了些时间写了这个博文, 这应该是国内技术圈中最早系统性研究airflow的文章了.  转载请注明出处 htt ...