Set SelectOneRadio dicentang di radioButton

Saya ingin mengatur status dicentang pada p:selectOneRadio menggunakan javascript.

Saya berhasil melakukannya tetapi hanya berfungsi dengan elemen pertama pada daftar selectOneRadio, inilah kodenya.

<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>

Saat saya memuat halaman dan mengklik tombol perintah, tombol radio pertama diperiksa dan tidak masalah, tetapi saya juga ingin tahu cara memeriksa dua lainnya.

Juga jika ada cara lain yang dapat mengubah status untuk memeriksa tombol radio itu tanpa menggunakan javascript, tolong beri tahu saya.

Terima kasih untuk bantuannya.

-Keva


java jquery jsf primefaces
person Kevin Valdez    schedule 24.10.2016    source sumber
comment
Pra-prosesor HTML manakah yang Anda gunakan? Bisakah Anda memposting HTML yang dihasilkan?   -  person Louys Patrice Bessette    schedule 25.10.2016
comment
Apakah Anda mencoba memilih semua kotak radio? Jika Ya, Anda menggunakan SelectOneRadio yang hanya dapat memilih satu item dalam daftar.   -  person Mark Vincent Osea    schedule 25.10.2016
comment
@MarkVincentOsea Saya tidak mencoba memilih semua. Yang saya inginkan hanyalah kode untuk memilih satu tombol radio saat saya mengklik tombol perintah. Seperti yang Anda lihat, saya berhasil melakukannya tetapi hanya untuk tombol radio pertama (yang pertama dari tiga) bagaimana saya bisa melakukannya untuk yang kedua atau yang ketiga   -  person Kevin Valdez    schedule 25.10.2016
comment
@LouysPatriceBessette apa yang Anda maksud dengan pra-prosesor HTML?   -  person Kevin Valdez    schedule 25.10.2016
comment
Maksud saya sintaks pengkodean HTML ini <[tagname]:[type ? ] [attributes]>... Ini bukan HTML biasa. Pra-prosesor digunakan untuk menafsirkannya. Saya tidak tahu yang mana... Ada banyak. Jadi jika Anda dapat memposting HTML asli, itu akan membantu.   -  person Louys Patrice Bessette    schedule 25.10.2016
comment
@LouysPatriceBessette Saya menggunakan html yang didukung oleh PrimeFaces dan saya tidak tahu apakah saya mengerti apa yang Anda minta di sini, yaitu tag html yang saya gunakan <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:p="http://primefaces.org/ui">   -  person Kevin Valdez    schedule 26.10.2016
comment
Doctype tidak relevan. Tapi saya hanya fokus pada kata kunci Primefaces, yang sampai sekarang tidak saya pedulikan (Kasihan saya). Sepertinya ini adalah «rangkaian komponen JSF dengan berbagai ekstensi» Referensi, hal. 10/634. Saya tidak akan membacanya. Untuk memberikan HTML biasa pada pertanyaan Anda, yang dapat Anda edit, Anda harus menyalin /tempelkan sumber relevan dari halaman yang Anda uji. Itu dapat dilihat dengan menambahkan view-source: tepat sebelum URL... Di Chrome... (tidak tahu untuk browser lain).   -  person Louys Patrice Bessette    schedule 26.10.2016
comment
Ada editor HTML di «suite» itu... Itulah yang saya maksud dengan pra-prosesor HTML. ;)   -  person Louys Patrice Bessette    schedule 26.10.2016

Jawaban (1)


arrow_upward
0
arrow_downward

Saya melakukan upaya kedua untuk ...melihat... HTML Anda.

Hasil HTML dari editor yang disertakan Primefaces Anda» pasti mendekati apa yang saya' Saya memposting sekarang di cuplikan di bawah. (Cukup sederhana, setelah penghalang sintaksis)

Jadi lihatlah kode jQuery...
Ini seharusnya menjadi perhatian utama Anda.

Pertanyaan Anda#1: "Saat saya memuat halaman dan mengklik tombol perintah, tombol radio pertama diperiksa dan baik-baik saja, tetapi saya juga ingin tahu cara memeriksa dua lainnya"

→ Ini adalah sifat tombol radio yang bersifat eksklusif dalam grup.
Cari kotak centang jika Anda ingin banyak yang dicentang.

Pertanyaan Anda#2: "Juga jika ada cara lain yang dapat mengubah status dengan memeriksa tombol radio itu tanpa menggunakan javascript, tolong beri tahu saya."

→ Ya... Sedang dimuat.
Melalui atribut HTML checked
< br> LAINNYA
→ Tidak.



BONUS
Saya menambahkan console.log ke dalamnya pada setiap perubahan status (dibuat oleh pengguna) untuk select dan radios.

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>

person Louys Patrice Bessette    schedule 26.10.2016