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>

当我加载页面并单击commandButton时，它检查了第一个radiobutton及其罚款，但我也想知道如何检查其他两个。

此外，如果还有其他方法可以在不使用javascript的情况下将状态更改为该radiobutton的chekes，请告诉我。

感谢您的帮助。

-Keva

Answer 1

我做了第二次努力...... 看 ...你的HTML。

«Primefaces包含的编辑器的HTML结果肯定接近我现在在下面的代码段中发布的内容。 （非常简单，在语法障碍之后）

那么看看jQuery代码......
它应该接近你的主要关注点。

你的问题＃1： «当我加载页面并点击commandButton它检查了第一个radiobutton及其罚款，但我也想知道如何检查另外两个»

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

您的问题＃2： «此外，如果有其他方法可以在不使用javascript的情况下将状态更改为放弃按钮，请告诉我。»

→是......上载。
通过HTML checked attribute

ELSE
→没有。

<强>奖金
我在select和radio s的任何状态更改（由用户制作）上添加了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>

在radioButton上选中SelectOneRadio set

1 个答案: