单选按钮 控制 输入框显示 的总结

设计目标：

 

1：页面进入的时候，根据单选按钮的，确定输入框的是否显示

2：触发onclick 事件的时候，根据单选按钮，确定输入框是否显示

 

 

 

弯路总结：

1：实现onclick 的时候,使用方法如下

 

 function setDisplay() {var isManager=document.getElementById("employForm:isManager");var isLlwyh=document.getElementById("employForm:isLlwyh");var workDisplay=document.getElementById("employForm:workDisplay");var yearsContentDisploy=document.getElementByI("employForm:yearsContentDisploy");if(isManager.value=='0') { workDisplay.style.display = 'block';}else{ workDisplay.style.display = 'none';}if(isLlwyh.value=='0') { yearsContentDisploy.style.display='block';}else{ yearsContentDisploy.style.display='none';}}

 

页面生成的HTML中ID 为employForm:isManager 的组件的值不能代表单选按钮的值，令人惊奇的是，这个组件竟然是一个Table。后来用thiis传值的方法获取到值。

 

2：实现页面加载控制输入框显示时，使用的方法如下：

 

在后台Manage Bean中写了一个根据单选按钮值判断boolean返回值的方法，然后在页面上用rendered进行控制。

 

原因：使用rendered实现了加载控制后，发现onclick不能工作，查看源文件，发现rendered为false，输入框代码不存在，竟然没有编译，使用style.display的方法完成功能，因为两个目标的实现原理相同了。

 

 

正确做法：

 

function setDisplayOfWork(obj) {var workDisplay=document.getElementById("employForm:workDisplay"); if(obj.value=='0') { workDisplay.style.display = 'block';}else{ workDisplay.style.display = 'none';}}

 

<f:verbatim> <c:if test="${employForm.employ.isManager=='0'}"> <script type="text/javascript"><!-- document.getElementById ("employForm:workDisplay").style.display='block'; </script> </c:if> <c:if test="${employForm.employ.isLlwyh=='0'}"> <script type="text/javascript"> document.getElementById ("employForm:yearsContentDisploy").style.display='block'; </script> </c:if></f:verbatim>