JSF selectOneRadio 项目与图像，如何设置单选按钮 CHECKED答案

【问题标题】：JSF selectOneRadio item with image, how to set the radio button CHECKEDJSF selectOneRadio 项目与图像，如何设置单选按钮 CHECKED
【发布时间】：2014-06-09 15:17:57
【问题描述】：

我想在 JSF 中实现以下 UI。

[单选按钮] [图像] [标签]

[RadioButton] [Image] [Label] 等等...

执行以下代码后，UI 看起来不错。但是，当我单击任何单选按钮时，UI 中不会出现选择（未选中单选），尽管 bean 类由 valueChanged 事件更新。那么如何设置 selectOneRadio 勾选呢？

JSF 代码：

    <!-- payment options -->
    <ui:repeat value="#{shoppingCartBean.paymentMethods}" var="m">

        <!-- radio button -->
        <div style="float:left;">
            <ice:selectOneRadio  
                value="#{shoppingCartBean.selectedPaymentMethod}"
                layout="pageDirection" 
                partialSubmit="true" 
                valueChangeListener="#{shoppingCartHandler.valueChanged}">     
                <f:selectItem itemLabel="" itemValue="#{m}"/>  
            </ice:selectOneRadio>  
        </div>           

        <!-- card image -->
        <div style="float:left;">
            <ice:graphicImage  value="#{layoutBean.currentImagesPath}/#{m}.png"/> 
        </div>

        <!-- payment method description or label -->
        <div style="padding: 10px">
            <ice:outputText value="#{bundleMessages.messages[m]}"/>
        </div>

        <div style="clear:both;"></div>
    </ui:repeat>

    <!-- payment options end-->

和bean类中的方法：

    public List<String> getPaymentMethods() {
        List<String> paymentMethods = new ArrayList<String>();
        paymentMethods.add("crditcard");
        paymentMethods.add("directbanking");
        paymentMethods.add("paypal");
        return paymentMethods;
    }

    public String getSelectedPaymentMethod() {            
        return this.selectedPaymentMethod;
    }

    public void setSelectedPaymentMethod(String selectedPaymentMethod) {
        this.selectedPaymentMethod = selectedPaymentMethod;
    }

handler 类中的 valueChanged 事件：

    public void valueChanged(ValueChangeEvent event) {
        String value = null;
        if (event.getSource() instanceof HtmlSelectOneRadio) {
            value = ((String) event.getNewValue());
        }
        if (value != null) {
            this.shoppingCartBean.setSelectedPaymentMethod(value);
        }
    }

【问题讨论】：

标签： javascript jquery jsf jsf-2 icefaces

【解决方案1】：

实际上，radioOneButton 的 'value="#{shoppingCartBean.selectedPaymentMethod}"' 多次被空字符串或错误字符串覆盖。因此在单选按钮中总是显示错误或没有选择。

我做了以下解决方法来避免 Bean 类中的“selectedPaymentMethod”属性的错误设置。并确保 'selectedPaymentMethod' 仅由 Handler 类中的 'valueChanged' 方法更新。

Handler类的valueChanged事件发生变化：

public void valueChanged(ValueChangeEvent event) {        
    String value = null;
    if (event.getSource() instanceof HtmlSelectOneRadio) {
        value = ((String) event.getNewValue());
    }
    if (value != null) {
        this.shoppingCartBean.setPaymentMethod(value);
    }
}

以及Bean类中的修改：

public void setSelectedPaymentMethod(String selectedPaymentMethod) {
    // DO NOTHING, Leave this method empty
}

public void setPaymentMethod(String paymentMethod) {
    this.selectedPaymentMethod = paymentMethod;
}

现在 'getSelectedPaymentMethod' 总是返回当前选择的单选项目，因此会检查正确的单选项目。

【讨论】：