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

Question

我的问题与jsf有关。

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

例如 在第一行中，有 5 列：第一列有一个问题，其余 4 个是单选按钮。：我希望用户在单行的 4 个单选按钮中选择一个，并对所有单选按钮重复相同的过程行。

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

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

我在这里得到了一些线索：http://www.javaworld.com/article/2077687/enterprise-java/group-radio-buttons-inside-a-jsf-datatable-component.html 但如果可能的话，我宁愿使用 javascript 代码来执行此活动，而不是使用自定义标记。或者如果在纯 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(':')) 值，但同一行中的单选按钮与我在浏览器的“查看源代码”中检查的名称不同。那么如何克服呢。

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>

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