How do I find in jQuery whether a p:selectBooleanCheckbox has been checked or not

Question

I need to know how to iterate through a list of primefaces p:selectBooleanCheckbox elements and find out rather or not they have been checked. I have found out how to find them but not how to actually get rather or not they are true or false, I was wondering if anyone here would be able to assist with this.

In as little code as possible this is what I am currently doing to get the actual element returned to me, I have used the jquery :checked as well as .val() and a few other methods but none seem to work. I have also tried sifting through the code in the element object in the console looking for anything that stands out and I haven't been able to find anything either. Any help would be greatly appreciated.

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">
<body>
    <ui:composition template="./../../WEB-INF/template.xhtml">
        <ui:define name="content">
            <div style="margin-bottom: 350px;">
                <p:outputLabel for="coop_sent" value="CO-OP Sent"/>
                <p:selectBooleanCheckbox name="coop_sent" styleClass="pc"     widgetVar="coop_sent" id="coop_sent" value="#{editProjectsBean.pc.co_opSen}"/>

                <script type="text/javascript">
                    for (var propertyName in PrimeFaces.widgets) {
                        if (PrimeFaces.widgets[propertyName] instanceof     PrimeFaces.widget.SelectBooleanCheckbox){
                            if (PrimeFaces.widgets[propertyName].widgetVar ===     'coop_sent') {
                                console.log($('PrimeFaces.widgets[propertyName].widgetVar.coop_sent')); 
                            }
                        }
                    }
                </script>
            </div>
        </ui:define>
    </ui:composition>
</body>
</html>

where are you planning on searching it? in the rendered html? or in your backing bean? — Fritz, Sep 21 '15 at 01:56
@Fritz, I plan on doing it in the rendered html I am going to use the results to display a button after all the check boxes are selected, I could do it in the backing bean but I don't feel as it that is dynamic enough for what I am pursuing. — , Sep 21 '15 at 01:58
`template="./../../WEB-INF/template.xhtml"` Get rid of that `../` nonsense. It's always relative to the web root, so just use `template="/WEB-INF/template.xhtml"`. — BalusC, Sep 21 '15 at 06:51

score 2 · Answer 1 · answered Sep 21 '15 at 07:29

As to the concrete question, the associated widget object has just a isChecked() function.

<p:selectBooleanCheckbox widgetVar="foo" ... />

var checked = PF("foo").isChecked();

See also this blog for an introduction on how to explore the widget var and all available functions.

As to the actual functional requirement, the question is a bit confusing and ambiguous as you seem to be interested in scanning through multiple checkbox components, but the jQuery code snippet is actually interested in only one. I guess that you're actually including this code snippet multiple times in an iteration, but you faced the problem that you ultimately found only one <p:selectBooleanCheckbox> widget in PrimeFaces.widgets which made you to ask this overly generic question.

You should be suffixing the widget var name with e.g. the iteration index or so.

<p:selectBooleanCheckbox widgetVar="foo_#{index}" ... />

A (better) alternative is to just give them all a common style class and traverse the HTML DOM tree instead. There's a hidden <input type="checkbox"> which you could just grab and check the checked state.

<p:selectBooleanCheckbox ... styleClass="pc" />

if ($(".ui-chkbox.pc input[type=checkbox]:checked").length) {
    // At least one is checked.
}

score 0 · Answer 2 · answered Sep 21 '15 at 02:08

Well from what I've tried, using this tag:

<p:selectBooleanCheckbox value="#{Bean.checkbox}" styleClass="test"/>

the rendered html is this:

<div id="tableForm:j_id868283402_33c0fe0b" class="ui-chkbox ui-widget test">
    <div class="ui-helper-hidden-accessible">
        <input id="tableForm:j_id868283402_33c0fe0b_input" type="checkbox" name="tableForm:j_id868283402_33c0fe0b_input">
    </div>
    <div class="ui-chkbox-box ui-widget ui-corner-all ui-state-default ui-state-active">
        <span class="ui-chkbox-icon ui-icon ui-c ui-icon-blank"></span>
    </div>
</div>

toggling the checkbox would just replace the ui-icon-blank to ui-icon-check in the <span> tag and vice versa.

I added styleClass="test" in the <p:selectBooleanCheckbox> tag. I think you can just use this .test .ui-chkbox-box > span to select the <span> tag and determine the values in its class attribute whether it's blank or checked.

How do I find in jQuery whether a p:selectBooleanCheckbox has been checked or not

2 Answers2