javascript - 如何确保只有一个h :selectOneRadio button is selected

Question

我有一些 JavaScript 代码(我从 BalusC 借来的)，用于确保在表格中只选择一个 h:selectOneRadio 按钮。不幸的是，我从 glassfish 服务器收到格式错误的表达式错误:

Error Parsing /ClientSearch.xhtml: Error Traced[line: 13] The content of elements must consist of well-formed character data or markup.

注意:

 if (elements[i].name.substring(elements[i].name.lastIndexOf(':')) == id) {

似乎是有问题的线路

我也不完全理解javascript(我是新手)，我希望有人可以向我解释它。

这是完整的 JavaScript:

 function dataTableSelectOneRadio(radio) {
    var id = radio.name.substring(radio.name.lastIndexOf(':'));
    var elements = radio.form.elements;
    for (var i = 0; i < elements.length; i++) {
        if (elements[i].name.substring(elements[i].name.lastIndexOf(':')) == id) {
            elements[i].checked = false;
        }
    }
    radio.checked = true;
}
 </script>  

为什么我会收到错误消息？ 而且，剧本本身似乎是错误的。代码不应该是 if NOT equal to id then false (如下所示)。

 if (elements[i].name.substring(elements[i].name.lastIndexOf(':')) != id) {
    elements[i].checked = false;
 }

显然我不明白。

这是该表的 Facelets 代码: 客户

        <h:column headerText="First Name"  >
            <f:facet name="header"><h:outputText value="First Name" /></f:facet>
            #{client.firstName}
        </h:column>
        <h:column headerText="Last Name"  >
            <f:facet name="header"><h:outputText value="Last Name" /></f:facet>
            #{client.lastName}
        </h:column>

        <h:column headerText="Select"  >
            <f:facet name="header"><h:outputText value="Last Name" /></f:facet>
            <h:selectOneRadio valueChangeListener="#{clientSearchBean.setSelectedItem}" >
                <f:selectItem itemValue="null" />
            </h:selectOneRadio>
        </h:column>

        <h:column headerText="Address"  >
            <f:facet name="header"><h:outputText value="Address" /></f:facet>
            #{client.address}
        </h:column>
        <h:column headerText="Cell"  >
            <f:facet name="header"><h:outputText value="Cell" /></f:facet>
            #{client.cell}
        </h:column>
        <h:column headerText="Phone"  >
            <f:facet name="header"><h:outputText value="Phone" /></f:facet>
            #{client.phone}
        </h:column>

    </h:dataTable>      

Answer 1

我已经尝试过(并且正在使用) <h:dataTable> 中的 BalusC 代码并且工作整洁。您有两个问题:

1. 您根本没有使用 JavaScript 函数(或者在您的代码中看到的函数):

   <h:column headerText="Select">
       <f:facet name="header">
           <h:outputText value="Last Name" />
       </f:facet>
       <!-- you forgot to add the onclick -->
       <h:selectOneRadio valueChangeListener="#{clientSearchBean.setSelectedItem}"
           onclick="dataTableSelectOneRadio(this);">
           <f:selectItem itemValue="null" />
       </h:selectOneRadio>
   </h:column>
   

2. 您的 JavaScript 代码具有 <象征。 Facelets 对这个符号的使用非常严格。要使其正常工作，您应该使用 XML CDATA用法 Script and Style elements :

   <script type="text/javascript">
   //the CDATA must be used with JavaScript comments
   //<![CDATA[
       function dataTableSelectOneRadio(radio) {
           var id = radio.name.substring(radio.name.lastIndexOf(':'));
           var elements = radio.form.elements;
           for (var i = 0; i < elements.length; i++) {
               if (elements[i].name.substring(elements[i].name.lastIndexOf(':')) == id) {
                   elements[i].checked = false;
               }
           }
           radio.checked = true;
       }
   //]]>
   </script>