다중체크박스 한개 이상 선택 필수 및 팝업 설정 채택완료
sssoll
1년 전
조회 1,983
안녕하세요 고수님들!
다중체크박스에서 한 개 이상 선택하기를 필수로 수정하고 싶은데요.
구조를 어찌 수정해야할지 모르겠습니다 ㅠㅠ
보통 required를 추가하면 되던데 이 구조는 해당하지 않는 것 같습니다...제작했던 스킨만 활용하다 보니 코드를 새로 짜는 건 제 능력 밖이네요...
또 required 가 해당되는 input을 체크하지 않으면 아래 이미지↓↓↓처럼 팝업이 기본적으로 뜨던데 이 기능이 나오게 하고 싶은데 어떻게 수정하면 될까요?
참고로 아래 이미지↓↓↓의 type은 radio입니다...
http://sir.kr/data/editor/2403/2105704005_1711344750.4156.png" width="591" />
1. 추가한 스크립트
</p>
<p><script>
<?php
$check1 = explode(", ", $write['wr_6']);
$check2 = explode(", ", $write['wr_7']);
?>
</script></p>
<p>
2. 구조
</p>
<p><div class="wr_6">
<label for="wr_6" class="label_tit">
<p class="fs_28 font_b">관심 제품</p>
<span></span>
</label></p>
<p> <ul class="inq_chk">
<li>
<h2 class="j_eng fs_20 font_b">카테고리1</h2>
<div class="inq_chk_2">
<label for="check1_1"><input id="check1_1" type="checkbox" name="check1[]" value="제품명1"<?php echo in_array("제품명1", $check1) ? ' checked="checked"' : '' ?>>제품명1</label>
<label for="check1_2"><input id="check1_2" type="checkbox" name="check1[]" value="제품명2"<?php echo in_array("제품명2", $check1) ? ' checked="checked"' : '' ?>>제품명2</label>
</div>
</li>
<li>
<h2 class="j_eng fs_20 font_b">카테고리2</h2>
<div class="inq_chk_3">
<label for="check2_1"><input id="check2_1" type="checkbox" name="check1[]" value="제품명3"<?php echo in_array("제품명3", $check1) ? ' checked="checked"' : '' ?>>제품명3</label>
<label for="check2_2"><input id="check2_2" type="checkbox" name="check1[]" value="제품명4"<?php echo in_array("제품명4", $check1) ? ' checked="checked"' : '' ?>>S제품명4</label>
</div>
</li>
<li>
<h2 class="j_eng fs_20 font_b">카테고리3</h2>
<div class="inq_chk_3">
<label for="check3_1"><input id="check3_1" type="checkbox" name="check1[]" value="제품명5"<?php echo in_array("제품명5", $check1) ? ' checked="checked"' : '' ?>>제품명5</label>
<label for="check3_2"><input id="check3_2" type="checkbox" name="check1[]" value="제품명6"<?php echo in_array("제품명6", $check1) ? ' checked="checked"' : '' ?>>제품명6</label>
</div>
</li>
</ul>
</div> </p>
<p>
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
채택된 답변
+20 포인트
1년 전
다음 코드가 도움이 될지 모르겠습니다.
</p>
<p><script>
function example() {
var frm = null;
var submitbtn = null;</p>
<p> </p>
<p> frm = document.forms['frm'];</p>
<p> if (frm != null) {
frm.addEventListener('submit', function () {
//
});</p>
<p> submitbtn = frm.querySelector('[type="submit"]');
}</p>
<p>
if (submitbtn != null) {
submitbtn.addEventListener('click', function () {
var check1 = frm.elements['check1[]'];
var i, i_len;</p>
<p> for (i = 0, i_len = check1.length; i < i_len; i++) {
if (check1[i].checked == true) {
break;
}
}</p>
<p> if (i == check1.length) {
if (check1[0].dataset.tempnode == null) {
var radio = document.createElement('input');
radio.name = 'radio-'.concat(Date.now());
radio.id = radio.name;
radio.type = 'radio';
radio.required = true;
radio.style.position = 'absolute';
radio.style.zIndex = -1;
radio.style.opacity = 0;
radio.onfocus = radio.blur;</p>
<p> check1[0].dataset.tempnode = radio.name;
check1[0].parentNode.insertBefore(radio, check1[0]);
}
} else {
if (check1[0].dataset.tempnode != null) {
frm.querySelector('#' + check1[0].dataset.tempnode).remove();
}
}
})
}
}</p>
<p> </p>
<p>document.addEventListener('DOMContentLoaded', example);
</script></p>
<p><form name="frm" method="post">
<div class="wr_6">
<label for="wr_6" class="label_tit">
<p class="fs_28 font_b">관심 제품</p>
<span></span>
</label>
<ul class="inq_chk">
<li>
<h2 class="j_eng fs_20 font_b">카테고리1</h2>
<div class="inq_chk_2">
<label for="check1_1"><input id="check1_1" type="checkbox" name="check1[]" value="제품명1">제품명1</label>
<label for="check1_2"><input id="check1_2" type="checkbox" name="check1[]" value="제품명2">제품명2</label>
</div>
</li>
<li>
<h2 class="j_eng fs_20 font_b">카테고리2</h2>
<div class="inq_chk_3">
<label for="check2_1"><input id="check2_1" type="checkbox" name="check1[]" value="제품명3">제품명3</label>
<label for="check2_2"><input id="check2_2" type="checkbox" name="check1[]" value="제품명4">S제품명4</label>
</div>
</li>
<li>
<h2 class="j_eng fs_20 font_b">카테고리3</h2>
<div class="inq_chk_3">
<label for="check3_1"><input id="check3_1" type="checkbox" name="check1[]" value="제품명5">제품명5</label>
<label for="check3_2"><input id="check3_2" type="checkbox" name="check1[]" value="제품명6">제품명6</label>
</div>
</li>
</ul>
</div>
<input type="submit">
</form></p>
<p>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
s
sssoll
1년 전
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
다른 방법으로 해결하였지만 다음에 코드 활용 시 선생님이 도움을 주신 방법으로 적용해보겠습니다
다시 한 번 감사합니다!!