하나의 양식에 여러 라디오 버튼 그룹

단일 양식에 여러 라디오 버튼 그룹을 포함 할 수 있습니까? 일반적으로 하나의 버튼을 선택하면 이전 버튼이 선택 해제되며 그룹 중 하나를 선택 해제하면됩니다.

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

동일한 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>

한 가지만 수행하십시오. 동일한 유형에 대해 name 속성을 설정해야합니다. 예를 들어.

아래에서 시도하십시오.

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

이것은 모든 라디오 입력 그룹의 다른 이름을 유지해야하는 매우 간단합니다.

      <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

입력 그룹을 만들려면 사용자 지정 html 요소를 만들 수 있습니다.

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

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

각 그룹에서 선택한 옵션을 유지하려면 그룹의 입력에 이름 속성을 추가해야합니다. 추가하지 않으면 모두 하나의 그룹이됩니다.

입력 필드에서 이름을 다음과 같이 만드십시오.

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