Универсальная функция для скрытия элемента, когда вход изменяет его значение - PullRequest
Новая
       1

Универсальная функция для скрытия элемента, когда вход изменяет его значение

1 голос
/ 01 февраля 2012

Я новичок в этом мире JavaScript, но у меня есть проблема, которую я хочу решить. Мне нужно написать универсальную функцию на javaScript, поэтому, когда кто-то заполняет значение inputText, атрибут чекбокса рядом с ним меняется на «встроенный», а если значение удаляется, атрибут флажка меняется на «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';
    }
  }

Проблема в том, что я не хочу жестко задавать полный маршрут флажка, я пытаюсь написать универсальную функцию для сохранения строк кода и уменьшения кода де-JavaScript.

Заранее спасибо!

1 Ответ

2 голосов
/ 01 февраля 2012

Вы можете воспользоваться тем, что оба элемента имеют одинаковый префикс идентификатора клиента. 

<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";
}

В качестве альтернативы вы также можете просто воспользоваться преимуществами ajax-возможностей JSF2 / PrimeFaces, чтобы вам не требовалась строка кода 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>
...