e.target 方法判断多个radio 是否选择

最新推荐文章于 2022-08-08 08:41:43 发布

转载最新推荐文章于 2022-08-08 08:41:43 发布 · 269 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xiuciedward/p/3186163.html

文章标签：

#javascript #ViewUI

本文详细介绍了如何使用HTML、CSS和JavaScript实现一个自定义表单，包括性别和选项的交互逻辑，以及如何通过事件监听来控制隐藏字段的状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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