function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Alex Wong 4Alex Wong 4 

How can I show/ hide a div when the checkbox is selected?

In my case, I want to show pessage with a div, when a checkbox is checked. But when it is unchecked, I want to hide the div. I can it by using javascript, but it failed. Is there any problem for the script? 
<apex:page standardController="M_Pioneers__c" extensions="addPionners">
 <head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
 </head>
 <apex:form >
  <script>
$(".showp").hide();
$("#checkbox").click(function() {
    if($(this).is(":checked")) {
        $(".showp").show("slow");
    } else {
        $(".showp").hide("slow");
    }
});

  </script>
  <apex:pagemessages />
  <div>
   <label for="M_Pioneers_Name__c">Name</label>
   <apex:inputField value="{!pioneers.M_Pioneers_Name__c}" id="M_Pioneers_Name__c"/>
  </div>
  <div>
   <label for="M_Pioneers_Email__c">Email</label>
   <apex:inputField value="{!pioneers.M_Pioneers_Email__c}" id="M_Pioneers_Email__c"/>
  </div>
  <div>
   <label for="M_Pioneers_Phone__c">Contact Number</label>
   <apex:inputField value="{!pioneers.M_Pioneers_Phone__c}" id="M_Pioneers_Phone__c"/>
  </div>
  <div>
   <apex:inputCheckbox id="checkbox" onfocus="showp()"/>
  </div>
  <div class="showp" style="display: none">
  <p>HI!</p>
  </div>
 </apex:form>
</apex:page>

Thank you so much.
Best Answer chosen by Alex Wong 4
PavanKPavanK
With javascript


<apex:page >
 <head>

 </head>
 <apex:form >
  <script>
  function HideMsg(istrue)
  {
    var checkval = document.getElementById("msg")
    if(istrue.checked )
    {   
        var checkval = document.getElementById("msg").style.display='block';
    }
    else
    {
        var checkval = document.getElementById("msg").style.display='none';
    }
  }
  </script>
  <apex:pagemessages />

  <div>
   <apex:inputCheckbox id="checkbox" onchange="HideMsg(this);"/>
  </div>
  <div class="showp" style="display: none" id="msg">
  <p>HI!</p>
  </div>
 </apex:form>
</apex:page>

 

All Answers

PavanKPavanK
Hi ,

Can you please wrap div with apex:outputPanel and rerender and rendered on click of checkbox change.


Please let me know, if any more information is required.

Please mark this answer as best if it helped to resolve query.

Thanks,
Pavan
Alex Wong 4Alex Wong 4
What is the difference for using and not using apex:outputPanel? And how to use the rerender and rendered? Sorry for asking such stupid question. I am quite new for salesforce and web page coding.
PavanKPavanK
No that's per fectly fine.

rendered is something check for condition and if result comes true then its dispaly portion between tag

Rerender is something that refresh specific portion of page istead of refreshing complete page

Please refer below link for comparison
https://developer.salesforce.com/forums/?id=906F0000000AUDnIAO

I will provide sample code in few mins



 
PavanKPavanK
With javascript


<apex:page >
 <head>

 </head>
 <apex:form >
  <script>
  function HideMsg(istrue)
  {
    var checkval = document.getElementById("msg")
    if(istrue.checked )
    {   
        var checkval = document.getElementById("msg").style.display='block';
    }
    else
    {
        var checkval = document.getElementById("msg").style.display='none';
    }
  }
  </script>
  <apex:pagemessages />

  <div>
   <apex:inputCheckbox id="checkbox" onchange="HideMsg(this);"/>
  </div>
  <div class="showp" style="display: none" id="msg">
  <p>HI!</p>
  </div>
 </apex:form>
</apex:page>

 
This was selected as the best answer
PavanKPavanK
I realised your inputcheckbox is not binded with any controller value, so we won'y be able to use rerender as its required variable to evaluate conditions.

I will suggest to use above simple javascript .

Please mark this as best asnswer if my reply helped.
Alex Wong 4Alex Wong 4
My initial idea for the checkbox is only a way to show the pessage below. If I change my mind later, that create a checkbox field for my custom object, then should I use the render method?
Really thanks for your help!