zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    手动配置linux(centos)的IP地址
    linux(centos)上配置nginx、mysql、phpfpm开机启动
    visual studio 2022 下载地址
    自己动手开发编译器(五)miniSharp语言的词法分析器
    自己动手开发编译器(一)编译器的模块化工程
    自己动手开发编译器(二)正则语言和正则表达式
    趣味问题:你能用Reflection.Emit生成这段代码吗?
    自己动手开发编译器(零)序言
    自己动手开发编译器特别篇——用词法分析器解决背诵圣经问题
    自己动手开发编译器(三)有穷自动机
  • 原文地址:https://www.cnblogs.com/woodk/p/4600515.html
Copyright © 2011-2022 走看看