如下代码所示:
<table>之间为在html模板绘制的表格
<table border="1" width="627" height="170">
<tbody>
标红代码为check框的存储位置
<tr>
<td height="36">c1</td>
<!--黑色部分是需要在添加好check框之后需要我们为check框添加的一个div层,添加这个层的作用就是方便我们在javascript代码中方便拿到check框是否选中的这个状态。-->
<td>
<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>
JS代码部分
<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层来拿到我们选择框字段的值