search

Home  >  Article  >  Web Front-end  >  js method to achieve form radio switching effect_javascript skills

js method to achieve form radio switching effect_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:44:391481browse

The example in this article describes the method of using js to achieve the form Radio switching effect. Share it with everyone for your reference. The details are as follows:

Here we implement the Radio radio button switching effect in the form based on js. When a certain radio button is selected, the range will change together. I think everyone should save it. I couldn’t complain when I wanted to use it in the past. The name of this effect has been found now, and it is so simple to implement. There are some places to pay attention to, and get the label named myradio.

The screenshot of the running effect is as follows:

The online demo address is as follows:

http://demo.jb51.net/js/2015/js-table-radio-cha-codes/

The specific code is as follows: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Radio切换效果</title>
<style>
*{margin:0;padding:0;}
body{margin:50px;font-size:12px;color:#666;}
li{list-style:none;}
div{width:210px;}
#tab1 ,#tab2{width:398px;height:34px;border:1px #cfedff solid;border-bottom:0;background:url(images/title.gif) repeat-x;}
#tab1 ul ,#tab2 ul{margin:0;padding:0;}
#tab1 li,#tab2 li{float:left;padding:0 30px;height:34px;line-height:34px;text-align:center;border-right:1px #ebf7ff solid;cursor:pointer;}
#tab1 li.now,#tab2 li.now{color:#5299c4;background:#fff;font-weight:bold;}
.tablist{width:378px;height:100px;padding:10px;font-size:14px;line-height:24px;border:1px #cfedff solid;border-top:0;display:none;}
.block{display:block;}
</style>
</head>
<body>
<h1>Radio切换</h1>
<style type="text/css">
 fieldset{width:378px;border:1px #B0C0D1 solid;padding:10px;}
 legend{background:#B0C0D1;padding:4px 10px;color:#fff;}
 #c{margin-top:10px;}
 .c1,.c2{width:378px;line-height:20px;}
 .c1{color:#014CC9;}
 .c2{color:#7E6095;}
 h3{font-size:16px;padding:5px 0;}
 .red{color:#BD0A01;}
</style>
<script type="text/javascript">
function radioShow(){
 var myradio=document.getElementsByName("myradio");
 var div=document.getElementById("c").getElementsByTagName("div");
 for(i=0;i<div.length;i++){
  if(myradio[i].checked){
   div[i].style.display="block";
   }
   else{
   div[i].style.display="none";
   }
  }
 }
</script>
<form name="ck">
<fieldset>
 <legend>I'm Radio</legend>
  <h3>请选择：</h3>
  <label for="r1" class="red"><input name="myradio" id="r1" type="radio" value="" checked="checked" onclick="radioShow();" />XML教程</label>
  <label for="r2" class="red"><input name="myradio" id="r2" type="radio" value="" onclick="radioShow();" />浏览器脚本</label>
<div id="c">
 <div class="c1">
 <label for="xml"><input name="c2" type="checkbox" id="xml" value="" />XML</label>
  <label for="dtd"><input name="c2" id="dtd" type="checkbox" value="" />DTD</label>
  <label for="xmldom"><input name="c2" id="xmldom" type="checkbox" value="" />XML DOM</label>
  <label for="xsl"><input name="c2" id="xsl" type="checkbox" value="" />XSL</label>
  <label for="xslt"><input name="c2" id="xslt" type="checkbox" value="" />XSLT</label>
  <label for="xslfo"><input name="c2" id="xslfo" type="checkbox" value="" />XSL-FO</label>
  <label for="xpath"><input name="c2" id="xpath" type="checkbox" value="" />XPath</label>
  <label for="xquery"><input name="c2" id="xquery" type="checkbox" value="" />XQuery</label>
  <label for="xlink"><input name="c2" id="xlink" type="checkbox" value="" />XLink </label>
  <label for="xpointer"><input name="c2" id="xpointer" type="checkbox" value="" />XPointer</label>
  <label for="schema"><input name="c2" id="schema" type="checkbox" value="" />Schema</label>
  <label for="xforms"><input name="c2" id="xforms" type="checkbox" value="" />XForms</label>
 </div>
 <div class="c2" style="display:none;">
 <label for="js"><input name="c3" id="js" type="checkbox" value="" />JavaScript</label>
  <label for="hd"><input name="c3" id="hd" type="checkbox" value="" />HTML DOM</label>
  <label for="dhtml"><input name="c3" id="dhtml" type="checkbox" value="" />DHTML</label>
  <label for="vbs"><input name="c3" id="vbs" type="checkbox" value="" />VBScript</label>
  <label for="ajax"><input name="c3" id="ajax" type="checkbox" value="" />AJAX</label>
  <label for="e4x"><input name="c3" id="e4x" type="checkbox" value="" />E4X</label>
  <label for="wml"><input name="c3" id="wml" type="checkbox" value="" />WMLScript</label>
 </div>
</div>
</fieldset>
</form>
</body>
</html>

I hope this article will be helpful to everyone’s JavaScript programming design.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Beautiful form effect code implemented by jQuery_jqueryNext article：Beautiful form effect code implemented by jQuery_jquery

Related articles

See more