กลุ่มปุ่มตัวเลือกหลายกลุ่มในรูปแบบเดียว


113

เป็นไปได้ไหมที่จะมีกลุ่มปุ่มตัวเลือกหลายกลุ่มในรูปแบบเดียว? โดยปกติการเลือกปุ่มเดียวจะเป็นการยกเลิกการเลือกก่อนหน้านี้ฉันแค่ต้องยกเลิกการเลือกกลุ่มใดกลุ่มหนึ่ง

<form>
    <fieldset id="group1">
        <input type="radio" value="">
        <input type="radio" value="">
    </fieldset>

    <fieldset id="group2">
        <input type="radio" value="">
        <input type="radio" value="">
        <input type="radio" value="">
    </fieldset>
</form>

16
ตั้งชื่อให้พวกเขา (เช่น<input type="checkbox" name="checkGroup1" value =""/>
พอล

คำตอบ:


194

ตั้งค่าnameคุณลักษณะที่เท่าเทียมกันเพื่อสร้างกลุ่ม

<form>
  <fieldset id="group1">
    <input type="radio" value="value1" name="group1">
    <input type="radio" value="value2" name="group1">
  </fieldset>

  <fieldset id="group2">
    <input type="radio" value="value1" name="group2">
    <input type="radio" value="value2" name="group2">
    <input type="radio" value="value3" name="group2">
  </fieldset>
</form>


1
หากค่าเท่ากับ "" ทุกครั้งฉันจะทราบได้อย่างไรว่าปุ่มตัวเลือกใดถูกเลือก จะรู้ได้อย่างไรว่าปุ่มตัวเลือกถูกเลือกเลย?
user3182532

23
ใส่คุณค่าของคุณเอง
pankijs

12

เพียงทำสิ่งเดียวเราต้องตั้งค่าคุณสมบัติชื่อสำหรับประเภทเดียวกัน สำหรับเช่น

ลองด้านล่าง:

<form>
    <div id="group1">
        <input type="radio" value="val1" name="group1">
        <input type="radio" value="val2" name="group1">
    </div>
</form>

และเราสามารถทำได้ใน angular1, angular 2 หรือใน jquery ด้วย

<div *ngFor="let option of question.options; index as j">
<input type="radio" name="option{{j}}" value="option{{j}}" (click)="checkAnswer(j+1)">{{option}}
</div>  

8

นี่เป็นเรื่องง่ายมากที่คุณต้องใช้ชื่อที่แตกต่างกันของทุกกลุ่มอินพุตวิทยุ

      <input type="radio" name="price">Thousand<br>
      <input type="radio" name="price">Lakh<br>
      <input type="radio" name="price">Crore
      
      </br><hr>

      <input type="radio" name="gender">Male<br>
      <input type="radio" name="gender">Female<br>
      <input type="radio" name="gender">Other


2

ในการสร้างกลุ่มอินพุตคุณสามารถสร้างองค์ประกอบ html ที่กำหนดเองได้

window.customElements.define('radio-group', RadioGroup);

https://gist.github.com/robdodson/85deb2f821f9beb2ed1ce049f6a6ed47

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


2
คุณระบุได้ไหมว่าวิธีนี้แก้ไขปัญหาของคำถามได้อย่างไร สิ่งนี้สร้างเพียงกลุ่มเดียวเพิ่มชื่อเฉพาะให้กับอินพุตของแต่ละกลุ่มที่คุณสร้างด้วยวิธีนี้หรือไม่
Marthyn Olthof

2

ในช่องใส่ชื่อให้เหมือนกัน

<input type="radio" name="option" value="option1">
<input type="radio" name="option" value="option2" >
<input type="radio" name="option" value="option3" >
<input type="radio" name="option" value="option3" >
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.