1、有关例子的代码
点击文字后再展示隐藏的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="http://r01.uzaicdn.com/content/v1/styles/subject.css">
<link rel="stylesheet" href="styles/lianxi.css">
<script src="http://r01.uzaicdn.com/content/v1/scripts/core.js"></script>
<script src="scripts/lianxi.js"></script>
<!--[if lt IE 9]><script src="//r.uzaicdn.com/content/libs/html5shiv.js"></script><![endif]-->
<!--[if IE 6]><script src="//r.uzaicdn.com/content/libs/dd_belatedpng_0.0.8a-min.js" type="text/javascript"></script><script>DD_belatedPNG.fix('.png');</script><![endif]-->
<style type='text/css'>
.box{width: 100px;height: 30px;background: #FA6A2F;text-align: center;line-height: 30px;border-radius: 10px;cursor: pointer;color: #fff;}
.on{display: none;}
</style>
</head>
<body>
<a href="javascript:void()"οnclick="show()">点击此处显示或隐藏</a>
<div id="hoary"style="display:none">可以隐身可以显示。</div>
<script type="text/javascript">
function show(){
document.getElementById("hoary").style.display=document.getElementById("hoary").style.display==''?'none':'';
}
</script>
</html>
关于div控件的显示div空间隐藏讲解
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function dispHandle(obj)
{
if (obj.style.display == "none")
obj.style.display = "";
else
obj.style.display = "none";
}
</script>
</head>
<body>
<div id="HideShow">Hello World!</div>
<a href="javascript:dispHandle(HideShow)">Hide Show</a>
</body>
</html>
关于单选按钮选中其中某一个后再展示隐藏的内容
<form name="form1" method="post" action="">
<input name="radiobutton" type="radio" value="0" checked
οnclick="form1.select1.style.display='';form1.select2.style.display='none';">
11
<input type="radio" name="radiobutton" value="1"
οnclick="form1.select2.style.display='';form1.select1.style.display='none';">
22
<select name="select1" style="display:yes">
<option value="0" selected>11111</option>
<option value="1">2222</option>
</select>
<select name="select2" style="display:none">
<option value="3" selected>33333</option>
<option value="4">44444</option>
</select>
</form>
2、对于Yii小控件的使用,相关连接
yii小物件前端表单集合点击打开链接
查有关于hiddenField的使用
3、结合上述的代码,以及Yii小物件的使用,编写如下代码
<?php $form = $this -> beginWidget('CActiveForm', array( 'enableClientValidation'=>true, 'clientOptions'=>array( 'validateOnSubmit'=>true, ), ) ); ?> <?php echo $form->labelEx($odModel,'type'); ?> <?php echo $form->radioButtonList($odModel,'type',$type,array('separator'=>' ','class'=>'type','name'=>'test_type','onclick'=>'show()' ))?> <!--可以吧隐藏的东西放到一个div里面--> <?php echo $form->hiddenField($odModel,'test',array('id'=>'test3','style'=>'display:none'));?> <!--给属性增加id,值为test3,然后可以给JS调用--> <div id="div_test" style="float:left;border:1px;width:100%;display: none;"> <p align="center" class="MsoNormal" style="margin: 0cm 0cm 0pt; text-align: center"> <span style="font-size: 26pt; color: blue; font-family: 宋体; mso-bidi-font-size: 12.0pt; mso-ascii-font-family: 'times new roman'; mso-hansi-font-family: 'times new roman'"> <b>信息呈现</b> </span> </p> </div> <?php $this->endWidget(); ?> <script type="text/javascript"> function show(){ var types = document.getElementsByName("test_type");//获取单选按钮的方式,不是通过id,因为这边不大好获取id,可以给单选按钮进行命名,一名称进行查找,结果是一个数组 var radioValue = ""; var i; //将所选的值,即为check的值拿出,比较,用户所选 for(i=0;i<types.length;i++){ if(types[i].checked == true){ radioValue = types[i].value; break; }else{ continue; } } //如果是目标值,则对隐藏的内容进行展示 if(radioValue == '2'){ document.getElementById("test3").style.display=document.getElementById("test3").style.display==''?'none':'';//三元运算符 document.getElementById("test3").setAttribute("type","visible");//设置隐藏内容的样式,button,text document.getElementById("div_test").style.display=document.getElementById("div_test").style.display==''?'none':'';//三元运算符 } //否则对隐藏的内容继续隐藏,如果已经是显示的情况下,则改为隐藏 else{ document.getElementById("test3").style.display='none'; document.getElementById("div_test").style.display="none";//隐藏 } } </script>
效果是点击其中一个单选按钮,显示隐藏的div域;如果点击另外一个单选按钮,则不做任何显示
PS:小物件的对象为自己创建的,如$odModel,替换成自己的;对应的内容也进行修改
具体的操作在代码的注释里,这里不再详细描述。
这里提醒下,如果在Model文件中已经有相关的验证规则,那么此处的小物件的名字不要再更改,而是使用原来的,原来格式是model[attribute]进行调用。此处给上述例子的修改代码:
<?php $form = $this -> beginWidget('CActiveForm', array( 'enableClientValidation'=>true, 'clientOptions'=>array( 'validateOnSubmit'=>true, ), ) ); ?> <?php echo $form->labelEx($odModel,'type'); ?> <?php echo $form->radioButtonList($odModel,'type',$type,array('separator'=>' ','class'=>'type','onclick'=>'show()' ))?>
<!--
'name'=>'test_type' 这里
-->
<!--可以吧隐藏的东西放到一个div里面--> <?php echo $form->hiddenField($odModel,'test',array('id'=>'test3','style'=>'display:none'));?> <!--给属性增加id,值为test3,然后可以给JS调用--> <div id="div_test" style="float:left;border:1px;width:100%;display: none;"> <p align="center" class="MsoNormal" style="margin: 0cm 0cm 0pt; text-align: center"> <span style="font-size: 26pt; color: blue; font-family: 宋体; mso-bidi-font-size: 12.0pt; mso-ascii-font-family: 'times new roman'; mso-hansi-font-family: 'times new roman'"> <b>信息呈现</b> </span> </p> </div> <?php $this->endWidget(); ?> <script type="text/javascript"> function show(){ var types = document.getElementsByName("model[attribute]");//获取单选按钮的方式,不是通过id,因为这边不大好获取id,可以给单选按钮进行命名,一名称进行查找,结果是一个数组
//这里"test_type" var radioValue = ""; var i; //将所选的值,即为check的值拿出,比较,用户所选 for(i=0;i<types.length;i++){ if(types[i].checked == true){ radioValue = types[i].value; break; }else{ continue; } } //如果是目标值,则对隐藏的内容进行展示 if(radioValue == '2'){ document.getElementById("test3").style.display=document.getElementById("test3").style.display==''?'none':'';//三元运算符 document.getElementById("test3").setAttribute("type","visible");//设置隐藏内容的样式,button,text document.getElementById("div_test").style.display=document.getElementById("div_test").style.display==''?'none':'';//三元运算符 } //否则对隐藏的内容继续隐藏,如果已经是显示的情况下,则改为隐藏 else{ document.getElementById("test3").style.display='none'; document.getElementById("div_test").style.display="none";//隐藏 } } </script>