Use <f:ajax render=idOfPanelContainingInputFields> in the checkbox and give the component containing the input fields a rendered attribute which depends on the checkbox's state. No need for another JS code clutter.

<h:form>

    <fieldset>

        <legend>

            <h:selectBooleanCheckbox binding=#{showUserInfo}>

                <f:ajax render=idOfPanelContainingTextBox />

            </h:selectBooleanCheckbox>

            <h:outputText value=User information />

        </legend>

        <h:panelGroup id=idOfPanelContainingTextBox layout=block>

            <ui:fragment rendered=#{not empty showUserInfo.value and showUserInfo.value}>

                <p>

                    <h:outputLabel for=firstName value=First name: />

                    <h:inputText id=firstName value=#{bean.user.firstName} />

                </p>

            </ui:fragment>

        </h:panelGroup>

    </fieldset>

</h:form>

The above example binds the checkbox to the view, you can of course also bind it to a boolean bean property, you can then remove the not empty check from the rendered attribute.

            <h:selectBooleanCheckbox value=#{bean.showUserInfo}>



...



            <ui:fragment rendered=#{bean.showUserInfo}>

See also:

• How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar"


• Why do I need to nest a component with rendered="#{some}" in another component when I want to ajax-update it?