0

I am using <apex:selectcheckboxes> and wondering how to get all the selected checkboxes values in javascript. On the click of a checkbox I'm calling a Javascript function showOtherPlatforms(). This function should check if Others is checked or not. If checked, it should display "Others textbox" else hide it. How do I pass all the selections to the function? Passing this as a parameter gives me the current selection.

Code -

<apex:selectcheckboxes id="socialPlatforms" value="{!applicationinfo.platforms}" layout="pagedirection" onclick="showOtherPlatforms(this);">
    <apex:selectOptions value="{!applicationinfo.AllPlatforms}"/>
</apex:selectcheckboxes>

My checkbox would be

1) Facebook

2) Twitter

3) Pinterest

4) Other (If others is checked, I need to show a textbox)

function showOtherPlatforms(selPlatforms)
{
    alert(selPlatforms.value);
    alert(selPlatforms.checked);
    //this gives the current selection
}
2

Assuming you want this all to happen at the client-side, I would suggest including jQuery in your page to abstract away browser differences and to make your JavaScript code simpler.

Here is a stand-alone example of what I think you are looking to do:

<apex:page>

<apex:form>
    <apex:selectcheckboxes layout="pagedirection">
        <apex:selectOption itemValue="Facebook" itemLabel="Facebook"/>
        <apex:selectOption itemValue="Twitter" itemLabel="Twitter"/>
        <apex:selectOption itemValue="PInterest" itemLabel="PInterest"/>
        <apex:selectOption itemValue="Other" itemLabel="Other"/>
    </apex:selectcheckboxes>
    <apex:inputText styleClass="other"/>
</apex:form>

<script src="https://code.jquery.com/jquery-1.11.1.min.js"/>
<script>
var j$ = jQuery.noConflict();
j$(document).ready(function() {
    var field = j$('input.other');
    field.hide();
    j$('input:checkbox[value="Other"]').change(function() {
        if (j$(this).is(':checked')) {
            field.show();
        } else {
            field.hide();
        }
    });
});
</script>

</apex:page>
  • whats the best way to handle rerenders on the page causing the jquery listeners to be lost? For now I have workaround of including the script inline so it gets reloaded during a rerender, but not the cleanest or ideal. – nickforce Sep 29 '16 at 8:23
  • 1
    @nickforce Components that can re-render usually have an oncomplete attribute where you can call a function that re-applies the jQuery listeners. You would call the same function when the page loads too. But I've also used the inline approach. In an ideal world not mixing the two idioms is cleanest. – Keith C Sep 29 '16 at 8:59
0

Just add the following in your visualforce page:

<apex:inputField rendered="{!otherCheckboxIsChecked}"/>

And add a method(or property) in your controller to return boolean depending on the state of your checkbox

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.