티스토리 뷰
<form action="">
<fieldset>
<legend class="blind">question</legend>
<div class="qus_wrap">
<div class="item">
<div class="question">
<p>1. question1</p>
</div>
<div class="radio_group">
<div class="radio_wrap">
<input type="radio" name="q1" id="q1_1" value="">
<label for="q1_1">매우 그렇지 않다</label>
</div>
<div class="radio_wrap">
<input type="radio" name="q1" id="q1_2" value="">
<label for="q1_2">그렇지 않다</label>
</div>
<div class="radio_wrap">
<input type="radio" name="q1" id="q1_3" value="">
<label for="q1_3">보통이다</label>
</div>
<div class="radio_wrap">
<input type="radio" name="q1" id="q1_4" value="">
<label for="q1_4">그렇다</label>
</div>
<div class="radio_wrap">
<input type="radio" name="q1" id="q1_5" value="">
<label for="q1_5">매우 그렇다</label>
</div>
</div>
</div>
<div class="item">
<div class="question">
<p>2. question2</p>
</div>
<div class="radio_group">
<div class="radio_wrap">
<input type="radio" name="q2" id="q2_1" value="">
<label for="q2_1">매우 그렇지 않다</label>
</div>
<div class="radio_wrap">
<input type="radio" name="q2" id="q2_2" value="">
<label for="q2_2">그렇지 않다</label>
</div>
<div class="radio_wrap">
<input type="radio" name="q2" id="q2_3" value="">
<label for="q2_3">보통이다</label>
</div>
<div class="radio_wrap">
<input type="radio" name="q2" id="q2_4" value="">
<label for="q2_4">그렇다</label>
</div>
<div class="radio_wrap">
<input type="radio" name="q2" id="q2_5" value="">
<label for="q2_5">매우 그렇다</label>
</div>
</div>
</div>
<div class="item">
<div class="question">
<p>3. question3</p>
</div>
<div class="radio_group">
<div class="radio_wrap">
<input type="radio" name="q3" id="q3_1" value="">
<label for="q3_1">매우 그렇지 않다</label>
</div>
<div class="radio_wrap">
<input type="radio" name="q3" id="q3_2" value="">
<label for="q3_2">그렇지 않다</label>
</div>
<div class="radio_wrap">
<input type="radio" name="q3" id="q3_3" value="">
<label for="q3_3">보통이다</label>
</div>
<div class="radio_wrap">
<input type="radio" name="q3" id="q3_4" value="">
<label for="q3_4">그렇다</label>
</div>
<div class="radio_wrap">
<input type="radio" name="q3" id="q3_5" value="">
<label for="q3_5">매우 그렇다</label>
</div>
</div>
</div>
</div>
<div class="btn_wrap">
<button type="button" class="btn btn_next" id="js_btn_next">다음</button>
</div>
</fieldset>
</form>
var btn_next = document.getElementById('js_btn_next');
var radio_tot = document.getElementsByClassName('item').length;
btn_next.onclick = function (){
for(i=1; i<=radio_tot; i++) {
if(!document.querySelector('input[type=radio][name=q' + i + ']:checked')){
alert('체크하지 않은 문항이 있습니다.');
return false;
}
}
};
'WebPublisher > JavaScript & jQuery' 카테고리의 다른 글
[javaScript] iframe으로 페이지 불러올 때 높이값 조정 (0) | 2023.08.25 |
---|---|
[javaScript] progress bar (0) | 2023.08.18 |
[javaScript] textarea 글자수 카운팅 (0) | 2023.08.16 |
[jQuery] textarea 글자수 카운팅 (0) | 2023.08.10 |
[javascript] 인쇄 영역 지정 / 테이블 배경 컬러 인쇄 css 속성 (0) | 2023.08.07 |
공지사항