選擇單選按鈕上的單選按鈕已選中

Question

我想使用javascript來設置ap：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時，它檢查了第一個單選按鈕及其功能，但我也想知道如何檢查其他兩個按鈕。

另外，如果還有其他方法可以在不使用javascript pls的情況下將狀態更改為已選中該單選按鈕，請告知我。

謝謝您的幫助。

-凱娃

Answer 1

我做了第二次努力來…… 查看 ……您的HTML。

您的“ Primefaces包含的編輯器”的HTML結果肯定與我在下面的代碼段中發布的內容接近。 （很簡單，在語法障礙之后）

因此，請看一下jQuery代碼...
它應該接近您的主要關注點。

您的問題＃1： “當我加載頁面並單擊commandButton時，它檢查了第一個單選按鈕及其功能，但我也想知道如何檢查其他兩個按鈕”

→這是單選按鈕在組中唯一的性質 。
如果要選中許多復選框，請查找復選框。

您的問題2： “另外，如果還有其他方法可以在不使用javascript的情況下將狀態更改為該單選按鈕的鎖定狀態，請告訴我。”

→是的...正在加載。
通過HTML checked屬性

其他
→否

獎金
我為select和radio的任何狀態更改（由用戶進行更改）都添加了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>