泛微OA系统利用Check框控制字段显示隐藏



如下代码所示：

<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>&nbsp;
            <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层来拿到我们选择框字段的值