泛型函数，用于在输入更改元素值时隐藏该元素

Generic function to hide an element when an input changes it value

本文关键字：元素 隐藏 函数 用于 输入 泛型      更新时间：2023-09-26

我是这个JavaScript世界的新手，但我有这个问题想解决。我需要在javaScript中编写一个通用函数，所以当有人填充inputText的值时，它旁边的复选框的属性将变为"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';
    }
  }

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

提前感谢！

您可以利用这两个元素具有相同客户端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>
相关文章：