ตรวจสอบชุด SelectOneRadio บน radioButton

ฉันต้องการตั้งค่าสถานะที่ตรวจสอบบน p:selectOneRadio โดยใช้ javascript

ฉันจัดการได้ แต่ใช้งานได้เฉพาะกับองค์ประกอบแรกในรายการ 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>

จาวาสคริปต์

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

ขณะที่ฉันโหลดหน้าเว็บและคลิกที่ปุ่ม commandButton มันจะตรวจสอบปุ่มตัวเลือกแรกและใช้งานได้ดี แต่ฉันก็อยากจะทราบวิธีตรวจสอบอีกสองปุ่มด้วย

นอกจากนี้หากมีวิธีอื่นที่สามารถเปลี่ยนสถานะเป็น cheked ของ radiobutton นั้นได้โดยไม่ต้องใช้ javascript โปรดแจ้งให้เราทราบ

ขอบคุณสำหรับความช่วยเหลือ

-เควา


java jquery jsf primefaces
person Kevin Valdez    schedule 24.10.2016    source แหล่งที่มา
comment
คุณใช้โปรเซสเซอร์ล่วงหน้า HTML ตัวใด คุณช่วยโพสต์ HTML ที่ผลิตได้ไหม   -  person Louys Patrice Bessette    schedule 25.10.2016
comment
คุณกำลังพยายามเลือกกล่องตัวเลือกทั้งหมดหรือไม่? หากใช่ คุณกำลังใช้ SelectOneRadio ที่สามารถเลือกได้เพียงรายการเดียวในรายการ   -  person Mark Vincent Osea    schedule 25.10.2016
comment
@MarkVincentOsea ฉันไม่ได้พยายามเลือกทั้งหมด ทั้งหมดที่ฉันต้องการคือรหัสเพื่อเลือกปุ่มตัวเลือกหนึ่งปุ่มขณะที่ฉันคลิกปุ่มคำสั่ง อย่างที่คุณเห็นว่าฉันทำได้ แต่สำหรับปุ่มตัวเลือกแรก (อันแรกจากสามอัน) ฉันจะทำอย่างไรกับอันที่สองหรืออันที่สาม   -  person Kevin Valdez    schedule 25.10.2016
comment
@LouysPatriceBessette คุณหมายถึงอะไรโดยตัวประมวลผลล่วงหน้า HTML?   -  person Kevin Valdez    schedule 25.10.2016
comment
ฉันหมายถึงไวยากรณ์การเข้ารหัส HTML นี้ <[tagname]:[type ? ] [attributes]>... มันไม่ใช่ HTML ธรรมดา พรีโปรเซสเซอร์ถูกใช้เพื่อตีความ ไม่รู้อันไหน...มีมากมาย ดังนั้นหากคุณสามารถโพสต์ HTML จริงได้ก็จะช่วยได้   -  person Louys Patrice Bessette    schedule 25.10.2016
comment
@LouysPatriceBessette ฉันใช้ html ที่ขับเคลื่อนโดย PrimeFaces และฉันไม่รู้ว่าฉันได้รับสิ่งที่คุณถามที่นี่หรือไม่ รวมถึงแท็ก html ที่ฉันใช้ <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 ไม่เกี่ยวข้อง แต่ฉันแค่เพ่งความสนใจไปที่คำหลัก Primefaces ซึ่งฉันไม่สนใจจนถึงตอนนี้ (แย่ของฉัน) ดูเหมือนว่าจะเป็น «ชุดคอมโพเนนต์ JSF ที่มีส่วนขยายต่างๆ» ข้อมูลอ้างอิง, p. 10/634. ฉันจะไม่อ่านมัน. หากต้องการให้ HTML ธรรมดาสำหรับคำถามของคุณ ซึ่งคุณสามารถแก้ไขได้ คุณจะต้องคัดลอก /วางแหล่งที่มาที่เกี่ยวข้องของหน้าที่คุณกำลังทดสอบ สามารถดูได้โดยเพิ่ม view-source: หน้า URL... ใน Chrome... (เบราว์เซอร์อื่นไม่ทราบ)   -  person Louys Patrice Bessette    schedule 26.10.2016
comment
มีโปรแกรมแก้ไข HTML ใน «ชุดโปรแกรม»... นั่นคือสิ่งที่ผมหมายถึงกับ ตัวประมวลผลล่วงหน้า HTML ;)   -  person Louys Patrice Bessette    schedule 26.10.2016

คำตอบ (1)


arrow_upward
0
arrow_downward

ฉันใช้ความพยายามครั้งที่สองเพื่อ ...ดู... HTML ของคุณ

ผลลัพธ์ HTML ของโปรแกรมแก้ไข «Primefaces รวมอยู่ด้วย» นั้นใกล้เคียงกับสิ่งที่ฉัน m โพสต์ตอนนี้ในตัวอย่างด้านล่าง (ค่อนข้างง่าย หลังจากอุปสรรคทางไวยากรณ์)

ลองดูโค้ด jQuery...
ซึ่งน่าจะใกล้เคียงกับข้อกังวลหลักของคุณ

คำถามของคุณ#1: «ในขณะที่ฉันโหลดหน้าเว็บและคลิกที่ปุ่ม commandButton จะมีการตรวจสอบปุ่มตัวเลือกแรกและใช้งานได้ดี แต่ฉันก็อยากจะทราบวิธีตรวจสอบอีกสองปุ่มที่เหลือด้วย»

→ ธรรมชาติ ของปุ่มตัวเลือกที่จะอยู่เฉพาะภายในกลุ่ม
มองหาช่องทำเครื่องหมายหากคุณต้องการทำเครื่องหมายหลายช่อง

คำถามของคุณ#2: «นอกจากนี้ หากมีวิธีอื่นที่สามารถเปลี่ยนสถานะเป็น cheked ของ radiobutton นั้นได้โดยไม่ต้องใช้ javascript โปรดแจ้งให้เราทราบ»

→ ใช่... กำลังโหลด
ผ่าน แอตทริบิวต์ HTML checked
< br> ELSE
→ ไม่



โบนัส
ฉันได้เพิ่ม console.log เข้าไปเมื่อมีการเปลี่ยนแปลงสถานะ (ทำโดยผู้ใช้) สำหรับ select และ 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