zoukankan      html  css  js  c++  java
  • e.target 方法判断多个radio 是否选择

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>12313</title>
    </head>
    <body>
    <form action="" method="" id="form1">
        <p>
            <input type="radio" value="1" name="man"/><input type="radio" value="2" name="man" /><input type="radio" value="3" name="man" />
            <input type="hidden" value="false" id="hidden0"/>
        </p>
        <p>
            <input type="radio" value="1" name="sex"/><input type="radio" value="2" name="sex" /><input type="radio" value="3" name="sex" />
            <input type="hidden" value="false" id="hidden1"/>
        </p>
        <input type="submit" id="submit"/>
    </form>
     
    <script type="text/javascript">
    window.onload = function(){
        var oForm = getId("form1");
        var hidden0 = getId("hidden0");
        var hidden1 = getId("hidden1");
        var submit = getId("submit");
        oForm.onclick = function(e){
            if(e){
                switch(e.target.name){
                    case "man":
                        hidden0.value = "true";
                        break;
                    case "sex":
                        hidden1.value = "true";
                        break;
                }
                e.stopPropagation();
            }else{
                switch(event.srcElement.name){
                    case "man":
                        hidden0.value = "true";
                        break;
                    case "sex":
                        hidden1.value = "true";
                        break;
                }
                event.cancelBubble = true;
            }
        }
        submit.onclick = function(e){
            var oEvent = e || event;
            if(hidden0.value != "true" && hidden1.value != "true"){
                alert("未选择");
                if(oEvent.preventDefault){
                    oEvent.preventDefault();
                }else{
                    oEvent.returnValue = false;
                }
            }else{
                alert("已经选择");
            }
            if(oEvent.stopPropagation){
                oEvent.stopPropagation();

            }else{
                oEvent.cancelBubble = true;
            }

        }
        document.onclick = function(){
            alert("b")
        }

    }
    function getId(id){
        return document.getElementById(id);
    }
    </script>
    </body>
    </html>

  • 相关阅读:
    TS之类的继承
    TS之函数及函数传参
    TS之数据类型
    Linux 协程
    设计模式 装饰器模式和代理模式
    C/C++ C和C++的区别
    C/C++ 内存分配方式
    Linux 进程间通信
    C/C++ RTTI
    Reactor设计模式
  • 原文地址:https://www.cnblogs.com/xiuciedward/p/3186163.html
Copyright © 2011-2022 走看看