Question

我想要一个复选框，选中后，选择列表框中的所有值。要查看是否选中了复选框，我使用：

if (getComponent('checkBox1').getValue() == "true") { // how select all items of for example listbox1 }

Answer 1

您可以使用列表框组件的setSelectedValues()方法，并传入包含列表框的所有值的数组，例如[ “VALUE1”， “VALUE2”， “值3”]。把它放在复选框的onChange事件中，部分刷新列表框，这应该做你想要的。

如果您不想在SSJS中对列表框值进行硬编码，而是从列表框中提取可用值，请查看此XSnippet by Sven Hasselbach。使用该片段，我在下面做了一个例子：

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:checkBox text="Select All" id="checkBox1">
    <xp:eventHandler event="onchange" submit="true" refreshMode="partial" refreshId="listBox1">
        <xp:this.action>
            <![CDATA[#{javascript:
                //Get the listbox component
                var listbox = getComponent('listBox1');
                if (getComponent('checkBox1').getValue() == "true") {
                    //Checkbox is checked
                    //Get an iterator for the items in the listbox              
                    var childrenList:java.util.ListIterator;
                    childrenList = listbox.getChildren().listIterator();

                    //Generate the array of items
                    var itemList = [];
                    while (childrenList.hasNext()) {
                        var child = childrenList.next();
                        itemList.push(child.getItemValue());
                    }

                    //Set the selectedValues of the listbox
                    listbox.setSelectedValues(itemList);
                }else if(getComponent('checkBox1').getValue() == "false") {
                    //Checkbox is unchecked
                    //Set listbox to have no selections, empty array
                    listbox.setSelectedValues([]);
                }
            }]]>
        </xp:this.action>
    </xp:eventHandler>
</xp:checkBox>
<xp:br />
<xp:listBox id="listBox1" multiple="true" style="height:200px;width:150px">
    <xp:selectItem itemLabel="value1" itemValue="value1"></xp:selectItem>
    <xp:selectItem itemLabel="value2" itemValue="value2"></xp:selectItem>
    <xp:selectItem itemLabel="value3" itemValue="value3"></xp:selectItem>
    <xp:selectItem itemLabel="value4" itemValue="value4"></xp:selectItem>
    <xp:selectItem itemLabel="value5" itemValue="value5"></xp:selectItem>
</xp:listBox>
</xp:view>

复选框以选择列表框的所有值

1 个答案: