Master Checkbox

The Master checkbox control provides an easier way to do Multiple checkbox selection when using repeats

Table-based Example

In this example, the 'slave' checkboxes are placed within rows of a table

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex">

<style>tr.selected td { background-color: #5bacf3; color: white; }</style>
<xp:table styleClass="table">
<xp:this.facets>
<xp:tr xp:key="thead">
<xe:th>
<xe:masterCheckBox id="masterCheckBox1" parentSelectorClick="tr" parentSelectorStyleClass="tr" parentStyleClassChecked="selected"
value="#{requestScope.burgercontents}">
</xe:masterCheckBox>
</xe:th>
<xe:th>Topping</xe:th>
</xp:tr>
</xp:this.facets>
<xp:repeat id="repeat1" rows="30" value="#{javascript:
return ['Bacon', 'Egg', 'Pineapple', 'Lettuce', 'Onion', 'Beetroot']}" var="ingredient">
<xp:tr>
<xp:td>
<xe:slaveCheckBox id="slaveCheckBox4" checkedValue="#{ingredient}" master="masterCheckBox1"></xe:slaveCheckBox>
</xp:td>
<xp:td>
<xp:text escape="true" id="computedField1" value="#{ingredient}"></xp:text>
</xp:td>
</xp:tr>
</xp:repeat>
</xp:table>
<xp:button value="Submit" id="button2">
<xp:eventHandler event="onclick" submit="true" refreshMode="complete"></xp:eventHandler>
</xp:button>
<xp:text escape="true" id="computedField2" value="#{requestScope.burgercontents}"></xp:text>


</xp:view>

Div-based Example

In this example, the 'slave' checkboxes are placed within rows of a table

Toppings
Bacon
Egg
Pineapple
Lettuce
Onion
Beetroot

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex">

<style>div.wrapper {padding: 5px;} div.selected { background-color: #5bacf3; color: white; }</style>

<xp:div>
<xp:div>
<xp:span style="display: inline-block; vertical-align: middle;">
<xe:masterCheckBox id="masterCheckBox2" parentSelectorClick="div.wrapper" parentSelectorStyleClass="div.wrapper" parentStyleClassChecked="selected"
value="#{requestScope.burgercontents2}">
</xe:masterCheckBox>

</xp:span>
<xp:span>
<xp:text escape="true" id="computedField1" value="Toppings"></xp:text>
</xp:span>

</xp:div>
<xp:repeat id="repeat2" rows="30" value="#{javascript: return ['Bacon', 'Egg', 'Pineapple', 'Lettuce', 'Onion', 'Beetroot']}" var="ingredient">
<xp:div styleClass="wrapper">
<xp:span style="display: inline-block; vertical-align: middle;">
<xe:slaveCheckBox id="slaveCheckBox1" checkedValue="#{ingredient}" master="masterCheckBox2"></xe:slaveCheckBox>
</xp:span>
<xp:span>
<xp:text escape="true" id="computedField3" value="#{ingredient}"></xp:text>
</xp:span>
</xp:div>
</xp:repeat>
</xp:div>
<xp:button value="Submit" id="button1">
<xp:eventHandler event="onclick" submit="true" refreshMode="complete"></xp:eventHandler>
</xp:button>
<hr></hr>
<xp:text escape="true" id="computedField4" value="#{requestScope.burgercontents2}"></xp:text>


</xp:view>