Question

我是这个JavaScript世界的新手，但我想解决这个问题。我需要在javaScript中编写泛型函数，因此当有人填充inputText的值时，旁边的chekbox的属性将更改为“inline”，如果删除该值，则复选框的属性将更改为“none”。

我使用Primfaces 3，这是我的代码。

<p:inputText id="inpValRezV" value="#{daniosParcialesBean.daniosParcialesDto.valorRezagoV}"
                    onchange="hideCheckFromInput(this.value, 'chkValRezV');"/>  
<p:selectBooleanCheckbox widgetVar="chkValRezV" id="chkValRezV" 
                    value="#{daniosParcialesBean.daniosParcialesDto.mcaRezagoV}" />

我的javaScript代码是：

   function hideCheckFromInput(valueInput, idCheckBox){
     var chkBox = document.getElementById(idCheckBox);
     if(valueInput == ''){
        chkBox.style.display = 'none';
     }else{
        chkBox.style.display = 'inline';
    }
  }

最后一段代码不起作用，因为getElementById返回null！但是下一个片段工作正常！

    function hideCheckFromInput(valueInput, idCheckBox){
     var chkBox = document.getElementById('principalDaniosTotales:documentacion:frmNegociacion:chkValRezV')
     if(valueInput == ''){
        chkBox.style.display = 'none';
     }else{
        chkBox.style.display = 'inline';
    }
  }

问题是我不想硬编码复选框的完整路径，我正在尝试编写一个通用函数来保存代码行并减少de javascript代码。

提前致谢！

Answer 1

您可以利用这两个元素具有相同客户端ID前缀的事实。

<p:inputText id="inpValRezV" onchange="hideCheckFromInput(this, 'chkValRezV')" />
<p:selectBooleanCheckbox id="chkValRezV" />

与

function hideCheckFromInput(input, checkboxId) {
    var checkbox = document.getElementById(input.id.substring(0, input.id.lastIndexOf(":") + 1) + checkboxId);
    checkbox.style.display = (input.value) ? "inline" : "none";
}

您也可以利用JSF2 / PrimeFaces ajax的功能，这样您就不需要任何JS代码：

<p:inputText value="#{daniosParcialesBean.daniosParcialesDto.valorRezagoV}">
    <p:ajax update="checkboxWrapper" />
</p:inputText>
<h:panelGroup id="checkboxWrapper">
    <p:selectBooleanCheckbox rendered="#{not empty daniosParcialesBean.daniosParcialesDto.valorRezagoV}" />
</h:panelGroup>

用于在输入更改值时隐藏元素的通用函数

1 个答案: