如何更改 outputText 的值？答案

【问题标题】：How to change the value of an outputText?如何更改 outputText 的值？
【发布时间】：2015-10-03 19:25:47
【问题描述】：

我正在开发一个系统，用户选择一些复选框，每个复选框都有一个货币值，我想根据选定的复选框更改 outputText。

示例：我有三个复选框，每个复选框都有 10.00 美元。如果用户只选择了两个复选框，则 outputText 必须显示 $20.00。如果用户选择最后一个，则 outputText 必须显示 $30.00。而这一切都无需重新加载页面。

到目前为止我的代码：

<h:form id="form">
    <p:fieldset legend="Tipo base do site:" style="margin-bottom:20px">
        <h:panelGrid columns="2" cellpadding="5">
            <p:dataList value="#{tiposIndexView.tipos}" var="tipo"
            type="ordered" >
                R$ 
                <h:outputText value="#{tipo.preco}" >
                    <f:convertNumber pattern="#0.00" />
                </h:outputText>
            </p:dataList>
            <p:selectOneRadio id="tipo" value="#{tiposIndexView.tipos}"
                    layout="grid" columns="1">
                    <f:selectItems value="#{tiposIndexView.tipos}" var="tipo"
                        itemLabel="#{tipo.nome}" itemValue="#{tipo.nome}" />
            </p:selectOneRadio>
        </h:panelGrid>
    </p:fieldset>

    <p:fieldset legend="Sistemas adicionais:" style="margin-bottom:20px">
        <h:panelGrid columns="2" cellpadding="5">
            <p:dataList value="#{sistemasIndexView.sistemas}" var="sistema"
            type="ordered" >
                R$ 
                <h:outputText value="#{sistema.preco}" >
                    <f:convertNumber pattern="#0.00" />
                </h:outputText>
            </p:dataList>
            <p:selectManyCheckbox style="margin-top:0px;!important" id="grid" value="#{sistemasIndexView.sistemas}" layout="grid" columns="1">
                <f:selectItems value="#{sistemasIndexView.sistemas}" var="sistema" itemLabel="#{sistema.nome}" itemValue="#{sistema}" />
            </p:selectManyCheckbox>
        </h:panelGrid>
    </p:fieldset>

    <p:fieldset legend="Valor total:">
        <h:outputText>
            R$ 
            <f:convertNumber pattern="#0.00" />
        </h:outputText>
    </p:fieldset>
</h:form>

最后一个 outputText 是我要显示总值的地方。

还有一个问题，每次我打开我的网站时，所有复选框都会开始选中，而我希望所有复选框都未选中。复选框代码：

@ManagedBean
@ViewScoped
public class SistemasIndexView implements Serializable{
    private static final long serialVersionUID = -2697991732915561009L;
    private List<Sistema> sistemas;

    @PostConstruct
    public void init(){
        sistemas = new ArrayList<>();
        sistemas.add(new Sistema("Teste", 200));
        sistemas.add(new Sistema("Exemplo", 300));
        sistemas.add(new Sistema("gsdfaf", 50));
    }

    public List<Sistema> getSistemas() {
        return sistemas;
    }

    public void setSistemas(List<Sistema> sistemas) {
        this.sistemas = sistemas;
    }
}

【问题讨论】：

如果你使用jquery这很容易实现。你可以使用它吗？
我可以选择这个系统的语言，但是我现在很想学习JSF。 :)
复选框默认值取决于您的支持 bean 中的真/假，您没有提供代码，所以我们只能猜测您的默认值是 true。是否要将总数存储在 backing bean 中？
但我正在通过名为 Sistema 的班级列表生成复选框。那么我需要在哪里设置为false？是的，我想将总数存储在支持 bean 中。
复选框里没有false/true，我的不好没勾选。

标签： java jsf primefaces xhtml

【解决方案1】：

您需要 2 个列表，一个用于存储所有复选框，第二个用于存储选定的复选框。这就是您选择所有复选框的原因，因为您选择的值尽可能相同。

Css 错误：style="margin-top:0px;!important" 应该是 style="margin-top:0px !important;"

您在支持 bean 中需要的东西（使用 getter/setter）：

选定项目列表private List<Sistema> selectedSistemas;
计算总和字段private int sum
输出计算方法public void calculateSum()

代码

<p:selectManyCheckbox style="margin-top:0px !important;" id="grid" value="#{sistemasIndexView.selectedSistemas}" layout="grid" columns="1">
       <f:selectItems value="#{sistemasIndexView.sistemas}" var="sistema" itemLabel="#{sistema.nome}" itemValue="#{sistema}" />
       <p:ajax process="@this" listener="#{test.calculateSum}" update="sum"/>
</p:selectManyCheckbox>

<h:outputText id="sum" value="#{test.sum}">
      <f:convertNumber pattern="#0.00" />
</h:outputText>

计算方法，你可以改变它，但从你写的内容来看，它可以完成这项工作

public void calculateSum() {
    sum = selectedSistemas.size() * 10;
}

【讨论】：