Input field visibility through JavaScript || interview stuff || sfdc problems and solutions

Input field visibility through JavaScript

Requirement: Our client has a requirement input field should be visible only when check box enables otherwise this input field remains hidden.

Description: We have visual force which contains lots of input field and check boxes. We had requirement user should select one of checkbox and one of input field should be visible.

 Visual force page:

<apex:page controller="SalesController">

<script>

function checkfieldStatus(lbltag,txtboxtag)

    {

      var elelbl = document.getElementById(lbltag);

      var eletxt = document.getElementById(txtboxtag);

    

      if(eletxt.style.display == "block" && elelbl.style.display == "block")

      {

        eletxt.style.display = "none";

        elelbl.style.display = "none"

      }

      else

      {

        eletxt.style.display = "block";

        elelbl.style.display = "block";

      }

    }

</script>

<apex:form id="ipage">

 <apex:pageBlock id="iPBlock" >

 <apex:pageBlockSection title="Details">

<apex:inputCheckbox value="{! }"  id="" onclick=" checkfieldStatus ('j_id0:ipage:iPBlock:j_id163:j_id164:j_id165:j_id167:lblCustomerChannel','j_id0:ipage:iPBlock:j_id163:j_id164:j_id165:j_id167:CustomerChannel');"/>

<apex:pageBlockSectionitem >                

     <apex:outputLabel value="Customer Channel "  id="lblCustomerChannel" style="display:none;font-weight:bold;"></apex:outputLabel>

     <apex:outputPanel style="display:none;" id="CustomerChannel"  >

            <apex:inputField value="{!sales.Customer_Channel__c}" id="Customer_Channel" />

     </apex:outputPanel>

              </apex:pageBlockSectionitem>

 As above visual force page having JavaScript code which called on click of Check box. We are passing the id of input field and label. We can see the JavaScript id view source of page.