반응형
하나의 양식에 여러 라디오 버튼 그룹
단일 양식에 여러 라디오 버튼 그룹을 포함 할 수 있습니까? 일반적으로 하나의 버튼을 선택하면 이전 버튼이 선택 해제되며 그룹 중 하나를 선택 해제하면됩니다.
<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" >
참고URL : https://stackoverflow.com/questions/28543752/multiple-radio-button-groups-in-one-form
반응형
'developer tip' 카테고리의 다른 글
SQL Server의 뷰에서 열을 참조하는 외래 키를 가질 수 있습니까? (0) | 2020.10.05 |
---|---|
ASP.NET Web API를 사용하여 이미지를 반환하는 권장 방법이 있습니까? (0) | 2020.10.05 |
설치된 React-Native 버전을 확인하는 방법 (0) | 2020.10.05 |
Ctrl + Scroll to Zoom Google지도 비활성화 (0) | 2020.10.05 |
WPF : 스타일이 지정된 목록 상자에서 포커스가있는 항목 주위의 점선 테두리 제거 (0) | 2020.10.05 |