How to get a value of JSF selectBooleanCheckbox by using JavaScript?

Question

I save in my selectBooleanCheckbox only boolean values in a backingbean which named "bean". To set a label for this checkbox in my JSF xhtml page i´m using a JSF outputText component.

Here is the JSF code (they are 2 checkboxes in this example):

<h:selectBooleanCheckbox class="extern" value="#{bean.booleanValue1}" />
<h:outputText value="My Labeltext1"/>

<h:selectBooleanCheckbox class="extern" value="#{bean.booleanValue2}" />
<h:outputText value="My Labeltext2"/>

Now i want to get the selected checkboxes with java script. I´m using the onselect event:

<h:selectBooleanCheckbox class="extern" value="#{bean.booleanValue1}" onselect="MyObject.update(this.options[this.selectedIndex].text);"/>
<h:outputText value="My Labeltext1"/>

<h:selectBooleanCheckbox class="extern" value="#{bean.booleanValue2}" onselect="MyObject.update(this.options[this.selectedIndex].text);"/>
<h:outputText value="My Labeltext2"/>

But this gets only the boolean values of the selected checkboxes. Is it possible to get the value of the outputText components? Is tehre any way to connect the output component with the selectBooleanCheckbox component?

Answer 1

You should give a unique ID to the components and then try getting these values in java script by their ID , Also you can use 'onclick' to call the java script method. for ex:

<h:selectBooleanCheckbox id="firstBox" class="extern" value="#{bean.booleanValue1}"       onclick="update(this)"/>
<h:outputText id="firstOutput" value="My Labeltext1"/>

And your java script function would look something like this:

  function update(val){
         var box= document.getElementById("firstBox");
         var outPut = document.getElementById("firstOutput");
        var boxValue = box.value;
        var outPutValue = outPut.value;
 }