當輸入改變它的值時隱藏元素的通用函數

在這個JavaScript世界中，我是新的，但是我想解決這個問題。我需要在javaScript中編寫一個通用函數，因此當某人填寫inputText的值時，它旁邊的chekbox的屬性更改爲「內聯」，並且如果該值被刪除，則複選框的屬性更改爲「無」。當輸入改變它的值時隱藏元素的通用函數

即時通訊使用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代碼。

在此先感謝！

來源

2012-01-31 Camauu

您可以利用這兩個元素具有相同客戶端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>

來源

2012-02-01 04:04:27 BalusC

這個工作！泰這麼多=） – Camauu 2012-02-01 12:27:37

當輸入改變它的值時隱藏元素的通用函數

回答

相關問題