如何使用jQuery检查第二个或第六个f：selectItem of p：selectManyCheckbox？

时间：2012-12-02 02:39:19

标签： jquery jsf primefaces

我正在使用PrimeFaces 3.4 <p:selectManyCheckbox>。我想知道用户是否检查了第二个或第六个选择项目。

以下是相关代码：

<h:form id="signup-form">
    <p:commandButton type="button" value="Export" icon="ui-icon-extlink" onclick="exportChart()"/>  
    <p:selectManyCheckbox id="ja"  layout="pageDirection">  
        <f:selectItem id="hola" itemLabel="Importadores." itemValue="1" />  
        <f:selectItem itemLabel="Distribuidores nacionales o regionales." itemValue="1" />  
        <f:selectItem itemLabel="Cadenas de Supermercados." itemValue="1" /> 
        <f:selectItem itemLabel="Otros minoristas de venta a cliente final." itemValue="1" />  
        <f:selectItem itemLabel="Hoteles, restaurantes, cafeterías o similares." itemValue="1" />  
        <f:selectItem itemLabel="Cliente final particular." itemValue="2" /> 
        <f:selectItem itemLabel="Cliente final empresas." itemValue="2" />
    </p:selectManyCheckbox>
</h:form>

单击命令按钮时执行的exportChart()功能如下：

<script>
    function exportChart() {  
        alert($(PrimeFaces.escapeClientId('signup-form:ja:hola')).is(':checked'));
    }  
</script>

然而它总是提醒false。如何检查用户是否已选中第二个或第六个选择项？

2 个答案:

答案 0 :(得分：2)

你所在的<p:selectManyCheckbox>生成基本上以下HTML（省略了所有jQuery UI功能）：

<input id=​"signup-form:​ja:0" name=​"signup-form:​ja" type=​"checkbox" value=​"1">​
<input id=​"signup-form:​ja:​1" name=​"signup-form:​ja" type=​"checkbox" value=​"1">​
<input id=​"signup-form:​ja:​2" name=​"signup-form:​ja" type=​"checkbox" value=​"1">​
<input id=​"signup-form:​ja:​3" name=​"signup-form:​ja" type=​"checkbox" value=​"1">​
<input id=​"signup-form:​ja:​4" name=​"signup-form:​ja" type=​"checkbox" value=​"1">​
<input id=​"signup-form:​ja:​5" name=​"signup-form:​ja" type=​"checkbox" value=​"2">​
<input id=​"signup-form:​ja:​6" name=​"signup-form:​ja" type=​"checkbox" value=​"2">​

因此，以下jQuery应该这样做：

if ($("input[name='signup-form:ja']:eq(1)").is(":checked")) {
    alert("The second item is checked");
}

if ($("input[name='signup-form:ja']:eq(5)").is(":checked")) {
    alert("The sixth item is checked");
}

请注意，索引是基于零的。

无关对具体问题，我会相应地修改项目值，以便它们都是唯一的，否则你在服务器端根本不知道哪些项目已被检查 - 它是提交给服务器端的项目值，而不是项目标签。使用唯一的项值，您可以在jQuery中更可靠地确定选中的值。基于项目索引很糟糕，因为它不可维护（例如，如果您需要根据某些业务需求重新排列或扩展项目，则必须修复所有脚本）。

答案 1 :(得分：0)

你好我解决了如何检查，我做了三件事：

1 - 我为selectManyCheckBox添加了一个id，并为每个 * selectItem创建了inputext type = hidden。 `                                                                                                                   

                                <p:selectManyCheckbox  id="many1" value="#{cuestionarioController.pd2Opciones}" layout="pageDirection">  
                                    <f:selectItem itemLabel="Centroamerica." itemValue="3" />  
                                    <f:selectItem itemLabel="Mexico." itemValue="4" />  
                                    <f:selectItem itemLabel="Estados Unidos/Canada." itemValue="5" /> 
                                    <f:selectItem itemLabel="Brasil." itemValue="5" />  
                                    <f:selectItem itemLabel="Sudamérica." itemValue="4" /> 
                                    <f:selectItem itemLabel="Caribe." itemValue="5" /> 
                                    <f:selectItem itemLabel="España." itemValue="5" /> 
                                    <f:selectItem itemLabel="Otros países europeos." itemValue="6" />
                                    <f:selectItem itemLabel="China." itemValue="6" />
                                    <f:selectItem itemLabel="Otros." itemValue="2" />
                                    <f:selectItem itemLabel="La empresa no ha comenzado a exportar de forma regular." itemValue="0" />
                                    <p:ajax listener="#{cuestionarioController.sumarOpciond2}"/>
                                </p:selectManyCheckbox>
                            </p:panelGrid>

                            <p:inputText id="texto1" type="hidden" value="#{cuestionarioController.pi.vali1D2}" /> 
                            <p:inputText id="texto2" type="hidden" value="#{cuestionarioController.pi.vali2D2}" />  
                            <p:inputText id="texto3" type="hidden" value="#{cuestionarioController.pi.vali3D2}" />  
                            <p:inputText id="texto4" type="hidden" value="#{cuestionarioController.pi.vali4D2}" />  
                            <p:inputText id="texto5" type="hidden" value="#{cuestionarioController.pi.vali5D2}" />  
                            <p:inputText id="texto6" type="hidden" value="#{cuestionarioController.pi.vali6D2}" />  
                            <p:inputText id="texto7" type="hidden" value="#{cuestionarioController.pi.vali7D2}" />  
                            <p:inputText id="texto8" type="hidden" value="#{cuestionarioController.pi.vali8D2}" />  
                            <p:inputText id="texto9" type="hidden" value="#{cuestionarioController.pi.vali9D2}" />  
                            <p:inputText id="texto10" type="hidden" value="#{cuestionarioController.pi.vali10D2}" />  
                            <p:inputText id="texto11" type="hidden" value="#{cuestionarioController.pi.vali11D2}" />  

                        </p:outputPanel>`

2-在javascript中调用函数的commandButton。 

<p:commandButton type="button" value="Resultado" onclick="validate()"/>

3-我调用的函数Javascript验证，在这里我使用了primefaces的escapeClientId，它在jquery中的组件的引用是什么。重要的是引用，我看到代码基本上由HTML中的primefaces生成“formInternacionalizacion：tabPreg_Inter：many1：0”，fisrt是表单，第二个是TabView，第三个是selectManyCheckBox，最后一个是selectItem的位置。因此，当checkBox更改时，这会设置一个inputtext 

function validate() {  
              //de2

            if($(PrimeFaces.escapeClientId('formInternacionalizacion:tabPreg_Inter:many1:0')).is(':checked') == true){ 
                $(PrimeFaces.escapeClientId('formInternacionalizacion:tabPreg_Inter:texto1')).val("1");
            }else{
                $(PrimeFaces.escapeClientId('formInternacionalizacion:tabPreg_Inter:texto1')).val("0");
            }

            if($(PrimeFaces.escapeClientId('formInternacionalizacion:tabPreg_Inter:many1:1')).is(':checked') == true){ 
                $(PrimeFaces.escapeClientId('formInternacionalizacion:tabPreg_Inter:text2')).val("1");
            }else{
                $(PrimeFaces.escapeClientId('formInternacionalizacion:tabPreg_Inter:texto2')).val("0");
            }

            if($(PrimeFaces.escapeClientId('formInternacionalizacion:tabPreg_Inter:many1:2')).is(':checked') == true){ 
                $(PrimeFaces.escapeClientId('formInternacionalizacion:tabPreg_Inter:texto3')).val("1");
            }else{
                $(PrimeFaces.escapeClientId('formInternacionalizacion:tabPreg_Inter:texto3')).val("0");
            }

            if($(PrimeFaces.escapeClientId('formInternacionalizacion:tabPreg_Inter:many1:3')).is(':checked') == true){ 
                $(PrimeFaces.escapeClientId('formInternacionalizacion:tabPreg_Inter:texto4')).val("1");
            }else{
                $(PrimeFaces.escapeClientId('formInternacionalizacion:tabPreg_Inter:texto4')).val("0");
            }

            if($(PrimeFaces.escapeClientId('formInternacionalizacion:tabPreg_Inter:many1:4')).is(':checked') == true){ 
                $(PrimeFaces.escapeClientId('formInternacionalizacion:tabPreg_Inter:texto5')).val("1");
            }else{
                $(PrimeFaces.escapeClientId('formInternacionalizacion:tabPreg_Inter:texto5')).val("0");
            }

            if($(PrimeFaces.escapeClientId('formInternacionalizacion:tabPreg_Inter:many1:5')).is(':checked') == true){ 
                $(PrimeFaces.escapeClientId('formInternacionalizacion:tabPreg_Inter:texto6')).val("1");
            }else{
                $(PrimeFaces.escapeClientId('formInternacionalizacion:tabPreg_Inter:texto6')).val("0");
            }

            if($(PrimeFaces.escapeClientId('formInternacionalizacion:tabPreg_Inter:many1:6')).is(':checked') == true){ 
                $(PrimeFaces.escapeClientId('formInternacionalizacion:tabPreg_Inter:texto7')).val("1");
            }else{
                $(PrimeFaces.escapeClientId('formInternacionalizacion:tabPreg_Inter:texto7')).val("0");
            }

            if($(PrimeFaces.escapeClientId('formInternacionalizacion:tabPreg_Inter:many1:7')).is(':checked') == true){ 
                $(PrimeFaces.escapeClientId('formInternacionalizacion:tabPreg_Inter:texto8')).val("1");
            }else{
                $(PrimeFaces.escapeClientId('formInternacionalizacion:tabPreg_Inter:texto8')).val("0");
            }

            if($(PrimeFaces.escapeClientId('formInternacionalizacion:tabPreg_Inter:many1:8')).is(':checked') == true){ 
                $(PrimeFaces.escapeClientId('formInternacionalizacion:tabPreg_Inter:texto9')).val("1");
            }else{
                $(PrimeFaces.escapeClientId('formInternacionalizacion:tabPreg_Inter:texto9')).val("0");
            }

            if($(PrimeFaces.escapeClientId('formInternacionalizacion:tabPreg_Inter:many1:9')).is(':checked') == true){ 
                $(PrimeFaces.escapeClientId('formInternacionalizacion:tabPreg_Inter:texto10')).val("1");
            }else{
                $(PrimeFaces.escapeClientId('formInternacionalizacion:tabPreg_Inter:texto10')).val("0");
            }

            if($(PrimeFaces.escapeClientId('formInternacionalizacion:tabPreg_Inter:many1:10')).is(':checked') == true){ 
                $(PrimeFaces.escapeClientId('formInternacionalizacion:tabPreg_Inter:texto11')).val("1");
            }else{
                $(PrimeFaces.escapeClientId('formInternacionalizacion:tabPreg_Inter:texto11')).val("0");
            }

            location.href ="resultadoGraficoMedia.xhtml";
        }
相关问题
最新问题