当前位置 : 主页 > 网站建设 > 正文

js获取radio选项卡value值并输出到指定div

原创

重庆seo2016-07-12 08:33:00阅读()用户体验JSA+ / A-

       灵活的运用JS能提高用户体验,这在网站建设中是非常重要的环节。由于接触JS不是非常多,虽然网络上的资源多,但同样的效果,不同的人写出来的都不一样,给初学者很大的障碍,“简单粗暴”的代码才是网站开发的亮点。

       下面是重庆seo吖七在开发网站注册页面中的运用案例。

js获取选中单选按钮值并赋值到指定div中

采用原生JS,不需要JS封包

<!DOCTYPE>
<html>
<head>
<script>
 function checks(){
  var radios=document.getElementsByName("sex");
  for(var i=0;i<radios.length;i++)
  {
   if(radios[i].checked==true)
  {
  alert("输出值为:"+radios[i].value);//弹出窗口
  document.getElementById("result").innerHTML=radios[i].value;//输出到指定<div id="result"></div>
  }
 }
 }
</script>
</head>
<body>
<input name="sex" type="radio" value="aa" onClick="checks()">男
<input name="sex" type="radio" value="bb" onClick="checks()">女
<input name="sex" type="radio" value="cc" onClick="checks()">人妖 
<br />
<div id="result"></div>
</body>
</html>

       对应的输出结果是:

男->aa
女->bb
人妖->cc

    扩展阅读

    本文地址:https://www.vi586.com/web/310.html
    版权声明:原创文章,版权归重庆SEO吖七所有,欢迎分享本文,支持原创,转载请保留出处

    赞(2)