在 radioButton 上选中 SelectOneRadio 集

Question

我想使用 javascript 在 p:selectOneRadio 上设置检查状态。

我设法做到了，但它只适用于 selectOneRadio 列表中的第一个元素，这是代码。

<h:form id="formID">
    <p:outputPanel id="customPanel" style="margin-bottom:10px">
        <p:selectOneRadio id="customRadio" value="#{radioView.color}" layout="custom">
            <f:selectItem itemLabel="Red" itemValue="Red" />
            <f:selectItem itemLabel="Green" itemValue="Green" />
            <f:selectItem itemLabel="Blue" itemValue="Blue" />
        </p:selectOneRadio>

        <h:panelGrid columns="2" cellpadding="5" border="1">
            <p:radioButton id="opt1" for="customRadio" itemIndex="0" />
            <h:outputLabel for="opt1" value="Red" />

            <p:radioButton id="opt2" for="customRadio" itemIndex="1" />
            <h:outputLabel for="opt2" value="Green" />

            <p:radioButton id="opt3" for="customRadio" itemIndex="2" />
            <h:outputLabel for="opt3" value="Blue" />

            <p:commandButton value="select" ajax="true" onclick="selectRadios()" update="@form"/>
        </h:panelGrid>
    </p:outputPanel>
</h:form>

JavaScript

<script type="text/javascript">
    function selectRadios() {
        jQuery("input[name='formID:customRadio']:first").prop('checked', true);
    }
    ;
</script>

当我加载页面并单击命令按钮时，它检查了第一个单选按钮并且很好，但我也想知道如何检查其他两个。

另外，如果有其他方法可以在不使用 javascript 的情况下将状态更改为选中该单选按钮，请告诉我。

感谢您的帮助。

-凯瓦

Answer 1

我再次努力...查看...您的 HTML。

«Primefaces 包含的编辑器» 的 HTML 结果肯定接近我现在在 sn-p 下面发布的内容。 （很简单，在语法障碍之后）

所以看看 jQuery 代码...
它应该接近您的主要关注点。

您的问题#1： «当我加载页面并单击命令按钮时，它检查了第一个单选按钮并且很好，但我也想知道如何检查其他两个»

→ 单选按钮的性质在组内是独占的。
如果要检查多个复选框，请查找复选框。

您的问题#2： «另外，如果有其他方法可以在不使用 javascript 的情况下将状态更改为选中该单选按钮，请告诉我。» p>

→ 是的...正在加载。
通过HTML checked attribute

其他
→ 没有。

奖金
我在 select 和 radios 的任何状态更改（由用户进行）时添加了 console.log。

var radioCollection = $("input[name='myRadio']");

var radioCheckedVal = 0;  // 0 is first element in zero-based collection.
                          // Change to make another radio selected onload.

// 1st radio input is selected onload
$(radioCollection).first().prop('checked', true);

$(radioCollection).click(function(){
    if( $(this).is("input:checked") ){
        radioCheckedVal = $(this).val();
        console.log( "Radio input checked: "+radioCheckedVal );
    }
});

$("#customPanel").change(function(){
    selectVal = $(this).val();
    console.log( "Dropdown selected: "+selectVal );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="formID">
  <select id="customPanel" style="margin-bottom:10px"><!-- p:outputPanel ?? -->
    <option value="Red">Red</option>
    <option value="Green">Green</option>
    <option value="Blue">Blue</option>
  </select>
  <table>
    <tr>
      <td>
        <input type="radio" name="myRadio" id="opt1" value="Red">
      </td>
      <td>
        <label for="opt1">Red</label>
      </td>
    </tr>
    <tr>
      <td>
        <input type="radio" name="myRadio" id="opt2" value="Green">
      </td>
      <td>
        <label for="opt1">Green</labe2>
      </td>
    </tr>
    <tr>
      <td>
        <input type="radio" name="myRadio" id="opt3" value="Blue">
      </td>
      <td>
        <label for="opt1">Blue</labe3>
      </td>
    </tr>
  </table>
</form>