利用系统check框控制字段显示隐藏
如下代码所示：
<table>之间为在html模板绘制的表格
<table border="1" width="627" height="170">
<tbody>
标红代码为check框的存储位置
<tr>
<td height="36">c1</td>
<td>
黑色部分是需要在天加好check框之后需要我们为check框添加的一个div层，添加这个层的作用就是方便我们在javascript代码中方便拿到check框是否选中的这个状态。
<div id="checkid">
<input id="$field5795$" class="InputStyle" name="field5795" value="[可编辑]C1" type="text" />
</div>
</td>
</tr>
这部分代码为我们需要显示隐藏字段的添加方法，和我们添加check框一样需要添加一个div层来控制我们字段的显示隐藏，将我们的字段存放在div层上，在这里要注意一点，我们这个层需要给到一个默认的属性 style="display: none" 让我们的层在初始化状态现为隐藏的。
<tr>
<td colspan="2">
<div style="display: none" id="divID"><input id="$field5797$" class="InputStyle" name="field5797" value="[可编辑]Z1" type="text" /></div>
</td>
</tr>
</tbody>
</table>
代码部分
<script language="javascript" type="text/javascript" >
要控制我们的层显示隐藏，我们的代码需要有两个部分，
页面初始化状态，判断check框是否选中，如果为选中状态，就让我们隐藏的那部分代码显示出来，
jQuery(document).ready(function(){
var checkdivid=jQuery("#checkid").children().attr("checked"); //根据存放check框的div层的id拿取我们check框当前的状态。
if (checkdivid==true) //条件判断 check框的值是否为true（也就是是否为选中状态）
{
var divID=jQuery("#divID"); //获取我们存放需要显示隐藏的字段的div层
if (divID!=null){
divID.attr("style","display:block"); //改变存放显示隐藏字段的div层的属性。（ 如果check框的值为true，则显示隐藏字段的div层属性改变为显示）
}
}
});
此段代码为在页面初始化状态下 当我们选中check框的时候，让需要隐藏的字段隐藏。（单击选中事件）
jQuery(document).ready(function(){
jQuery("#field5795").bind("click",function(){
var check1value = document.getElementById("field5795").checked;//获取check框的值
if(check1value==true){ //判断check框的值是否为true
var divID=jQuery("#divID");获取我们存放需要显示隐藏的字段的div层
if (divID!=null){
divID.attr("style","display:block");//改变存放显示隐藏字段的div层的属性。（ 如果check框的值为true，则显示隐藏字段的div层属性改变为显示）
}
}else{
var divID=jQuery("#divID");
if (divID!=null){
divID.attr("style","display:none");
}
}
}
);
});
</script>
完整代码：
<table border="1" width="627" height="170">
<tbody>
<tr>
<td height="36">c1</td>
<td>
<div id="checkid"><input id="$field5795$" class="InputStyle" name="field5795" value="[可编辑]C1" type="text" /></div>
</td>
</tr>
<tr>
<td colspan="2">
<div style="display: none" id="divID"><input id="$field5797$" class="InputStyle" name="field5797" value="[可编辑]Z1" type="text" /></div>
</td>
</tr>
</tbody>
</table>
<script language="javascript" type="text/javascript" >
jQuery(document).ready(function(){
var checkdivid=jQuery("#checkid").children().attr("checked");
if (checkdivid==true)
{
var divID=jQuery("#divID");
if (divID!=null){
divID.attr("style","display:block");
}
}
});
jQuery(document).ready(function(){
jQuery("#field5795").bind("click",function(){
var check1value = document.getElementById("field5795").checked;
if(check1value==true){
var divID=jQuery("#divID");
if (divID!=null){
divID.attr("style","display:block");
}
}else{
var divID=jQuery("#divID");
if (divID!=null){
divID.attr("style","display:none");
}
}
}
);
});
</script>
根据选择框控制字段的显示隐藏
···代码和用check框控制的一样，只是几个参数需修改
<table border="1" width="622" height="189">
<tbody>
<tr>
<td height="44">选择框</td>
<td height="44" colspan="3">
系统选择框字段存放在<div>层上（和用check框控制一样）
<div id="wbxz"><input id="$field5811$" class="InputStyle" name="field5811" value="[可编辑]选择框" type="text" /></div>
</td>
</tr>
<tr>
<td width="102">文本一</td>
<td width="194">
需要显示隐藏的字段存放在div层上，默认属性为隐藏style="display: none"
<div style="display: none" id="wby"><input id="$field5812$" class="InputStyle" name="field5812" value="[可编辑]文本1" type="text" /></div>
</td>
<td width="41">文本二</td>
<td width="257">
需要显示隐藏的字段存放在div层上，默认属性为隐藏style="display: none"
<div style="display: none" id="wbr"><input id="$field5813$" class="InputStyle" name="field5813" value="[可编辑]文本2" type="text" /></div>
</td>
</tr>
</tbody>
</table>
<script language="javascript" type="text/javascript" >
//已办事宜中查看时加载
jQuery(document).ready(function(){
var wbxz=jQuery("#wbxz").children().attr("value"); // 通过div层获取选择框的值
var divID1=jQuery("#wby"); //获取需要隐藏字段的id
var divID2=jQuery("#wbr");
if(wbxz==""){//判断选择框是否为空，若是选择框都为空，两个字段都隐藏
divID1.attr("style","display:none");
divID2.attr("style","display:none");
}
else if(wbxz==0){ //判断选择框值是否为0，若是选择框值为0，字段1显示 字段2隐藏
divID1.attr("style","display:block");
divID2.attr("style","display:none");
}
else if(wbxz==1){ //判断选择框值是否为1，若是选择框值为1，字段2显示 字段1隐藏
divID2.attr("style","display:block");
divID1.attr("style","display:none");
}
Else //返回初始状态，两个字段同时隐藏
{
divID1.attr("style","display:none");
divID2.attr("style","display:none");
}
});
//选择框选择时页面加载，（单击选中事件）
<script language="javascript" type="text/javascript" >
jQuery(document).ready(function(){
jQuery("#field5811").bind("click",function(){
var check1value2 = document.getElementById("field5811");//获取选择框的值
var check1value = check1value2 .options[check1value2 .selectedIndex].text //将check1value2取得的值以文本内容显示
var divID1=jQuery("#wby"); //获取 隐藏字段div层的id
var divID2=jQuery("#wbr");
if(check1value==""){ //判断选择框的值是否为空，•••••••
divID1.attr("style","display:none");
divID2.attr("style","display:none");
}
else if(check1value=="0"){ //选择框字段为0，••••••••••••
divID1.attr("style","display:block");
divID2.attr("style","display:none");
}
else if(check1value=="1"){ //选择框字段为1•••••••••••
divID2.attr("style","display:block");
divID1.attr("style","display:none");
}
else
{
divID1.attr("style","display:none");
divID2.attr("style","display:none");
}
}
)
});
</script>
注意在html表单中选择框的值一定要存放在div层上，在当我们在已办事宜中查看的时候html页面不会直接刷新的我们字段， 需要经过刷新加载div层来拿到我们选择框字段的值
浙公网安备 33010602011771号