입력이 변경 될 때 요소를 숨기는 일반 함수 값

Question

이 JavaScript 세계에서는 새로운 기능이 있지만이 문제는 해결하려고합니다. javaScript에 일반 함수를 작성해야하기 때문에 누군가가 inputText의 값을 채울 때 옆에있는 chekbox의 속성이 'inline'으로 변경되고 값이 삭제되면 확인란의 속성이 'none'으로 변경됩니다. .

Im은 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}" /> 

그리고 내 자바 스크립트 코드는 다음과 같습니다에서 getElementById가! 널 (null) 그러나 다음 조각이 잘 작동 반환되기 때문에 코드의

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

마지막 조각이없는 일을한다!

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

문제

내가, 내가 코드의 라인을 저장하고 자바 스크립트 코드 드 감소하는 일반적인 함수를 작성하려고 해요 체크 박스의 전체 경로를 하드 코드하지 않을 것입니다.

미리 감사드립니다.

Answer 1

두 요소 모두 동일한 클라이언트 ID 접두어를 사용할 수 있습니다.

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

와

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

당신이 JS 코드의 라인이 필요하지 않도록 당신은 다른 방법도 단지 JSF2/PrimeFaces의 장점 아약스 힘을 걸릴 수 있습니다 :이 일을

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