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

发布于 2025-01-01 08:33:23 字数 1276 浏览 4 评论 0原文

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

我使用 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';
    }
  }

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

提前致谢！

原文

Im new in this JavaScript world, but i have this problem i want to solve.
I need to write a generic function in javaScript, so when someone fill the value of an inputText the attribute of the chekbox next to it change to 'inline', and if the value is deleted the attribute of the checkbox change to 'none'.

Im using Primfaces 3, here is my code.

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

And my javaScript code is:

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

The last fragment of code doesn't works because getElementById is returning null!, however the next fragment works fine!

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

The problem is that i don't want to hardcode the full route of the checkbox, i'm trying to write a generic function to save lines of codes and reduce de javascript code.

Thanks in advance!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

你对谁都笑 2025-01-08 08:33:23

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

You could take advantage of the fact that the both elements have the same client ID prefix.

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

with

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

You could alternatively also just take advantage of JSF2/PrimeFaces ajax powers so that you don't need any line of JS code:

<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>

回复收藏 0 原文

~没有更多了~