如何在jsf中<h:dataTable>中的一整行中只select一个单选按钮？

Question

我的问题与jsf有关。

我正在尝试制作一个带单选按钮的 jsf 数据表。

例如在第一行中，有 5 列：第一列有一个问题，其余 4 个是单选按钮。：我希望用户在一行中的 4 个单选按钮中只 select 一个单选按钮并重复相同的操作处理所有行。

我已阅读以下内容 link，其中给出了 javascript 代码用于 select 使用单选按钮输入一行： How to group Radio Buttons in h:datatable jsf2.0 和 http://www.javabeat.net/how-to-use-hselectoneradio-inside-hdatatable-in-jsf/

但我的要求是 select 单选按钮中的一个连续

我在这里得到了一些线索：http://www.javaworld.com/article/2077687/enterprise-java/group-radio-buttons-inside-a-jsf-datatable-component.html 但我宁愿使用 javascript 代码来执行此操作 activity 而不是使用自定义标签，如果 possible.Or如果有另一种方法可以在纯 jsf 中做同样的事情。

编辑：

jsp中的代码：

<h:dataTable var="row" value="#{rateYourBillerBean.questionsList}">
   <h:column>
      <f:facet name="header">
         <h:outputText value="Question" />
      </f:facet>
      <h:outputText value="#{row.question}" />
   </h:column>
   <h:column>
      <f:facet name="header">
         <h:outputText value="Poor" />
      </f:facet>
      <h:selectOneRadio styleClass="rad" onclick="uncheckOthers(this)" value="#{row.poor}">
         <f:selectItem itemValue="1" />
      </h:selectOneRadio>
   </h:column>
   <h:column>
      <f:facet name="header">
         <h:outputText value="Average" />
      </f:facet>
      <h:selectOneRadio styleClass="rad" onclick="uncheckOthers(this)" value="#{row.average}">
         <f:selectItem itemValue="2" />
      </h:selectOneRadio>
   </h:column>
   <h:column>
      <f:facet name="header">
         <h:outputText value="Good" />
      </f:facet>
      <h:selectOneRadio styleClass="rad" onclick="uncheckOthers(this)" value="#{row.good}">
         <f:selectItem itemValue="3" />
      </h:selectOneRadio>
   </h:column>
   <h:column>
      <f:facet name="header">
         <h:outputText value="Excellent" />
      </f:facet>
      <h:selectOneRadio styleClass="rad" onclick="uncheckOthers(this)" value="#{row.excellent}">
         <f:selectItem itemValue="4" />
      </h:selectOneRadio>
   </h:column>
</h:dataTable>

JS:

<script>
    function uncheckOthers(radio) {
        var name = 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(':')) == name) {
                elements[i].checked = false;
            }
        }
        radio.checked = true;
    }
</script>

问题是连续行中的每个单选按钮都具有相同的 radio.name.substring(radio.name.lastIndexOf(':')) 值，但同一行中的单选按钮的名称与我在 "View Source" 中签入的名称不同的浏览器。那么如何克服呢。

Answer 1

第一行jsf在html中生成的单选按钮名称分别为：j_id_jsp_2000213722_8:0:rad1、j_id_jsp_2000213722_8:0:rad2、j_id_jsp_2000213722_8:0:rad3和 j_id_jsp_2000213722_8:0:rad4

同理，第二行jsf在html中生成的单选按钮名称为： j_id_jsp_2000213722_8:1:rad1, j_id_jsp_2000213722_8:1:rad2, j_id_jsp_2000213722_8:1:rad3 和 j_id_jsp_2000213722_8:1:rad4

所以我们可以看到名称中最后一个冒号后的字符串 (rad1, rad2, rad3) 表示该列不同，第一个冒号 (0,1,2) 后的整数表示该行不同但它们对于同一行中的每个单选按钮都是相同的。

所以我的逻辑是不应同时选中名称为 0 或 1 或 2 的两个单选按钮。

所以我按如下方式更改了脚本代码以提取每行的 0 或 1 或 2：

<script>
        function uncheckOthers(radio) {
            var name = radio.name.substring(radio.name.indexOf(':') + 1,
                    radio.name.indexOf(':') + 2);
            console.log("name=" + name)
            var elements = radio.form.elements;
            for (var i = 0; i < elements.length; i++) {
                if (elements[i].name.substring(
                        elements[i].name.indexOf(':') + 1, radio.name
                                .indexOf(':') + 2) == name)
                    elements[i].checked = false;
            }
            radio.checked = true;
        }
    </script>

我的要求是它应该允许我在不同的行中同时 select 单选按钮但不在同一行中，在第一行中所有单选按钮的名称为 0，在第二行中为 1，在第三行中2，在第四行中，name 的值为 4。因此，我将 name 的那一部分用于一行，即第一个冒号之后的部分，以便根据逻辑，它将只允许检查一个具有该名称的单选按钮，并且它将取消选中除选中的名称之外的所有其他具有相同名称的单选按钮。所以这个逻辑对我有用。

如何在jsf中<h:dataTable>中的一整行中只select一个单选按钮？

How to select only one radio button out of a complete row in <h:dataTable> in jsf?

javascript

jsf-1.2