다중체크박스 한개 이상 선택 필수 및 팝업 설정
본문
안녕하세요 고수님들!
다중체크박스에서 한 개 이상 선택하기를 필수로 수정하고 싶은데요.
구조를 어찌 수정해야할지 모르겠습니다 ㅠㅠ
보통 required를 추가하면 되던데 이 구조는 해당하지 않는 것 같습니다...제작했던 스킨만 활용하다 보니 코드를 새로 짜는 건 제 능력 밖이네요...
또 required 가 해당되는 input을 체크하지 않으면 아래 이미지↓↓↓처럼 팝업이 기본적으로 뜨던데 이 기능이 나오게 하고 싶은데 어떻게 수정하면 될까요?
참고로 아래 이미지↓↓↓의 type은 radio입니다...
1. 추가한 스크립트
<script>
<?php
$check1 = explode(", ", $write['wr_6']);
$check2 = explode(", ", $write['wr_7']);
?>
</script>
2. 구조
<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"<?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>
답변 1
다음 코드가 도움이 될지 모르겠습니다.
<script>
function example() {
var frm = null;
var submitbtn = null;
frm = document.forms['frm'];
if (frm != null) {
frm.addEventListener('submit', function () {
//
});
submitbtn = frm.querySelector('[type="submit"]');
}
if (submitbtn != null) {
submitbtn.addEventListener('click', function () {
var check1 = frm.elements['check1[]'];
var i, i_len;
for (i = 0, i_len = check1.length; i < i_len; i++) {
if (check1[i].checked == true) {
break;
}
}
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;
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();
}
}
})
}
}
document.addEventListener('DOMContentLoaded', example);
</script>
<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>
선생님 감사합니다ㅜㅠㅜ 너무 늦게 확인을 하였네요..
다른 방법으로 해결하였지만 다음에 코드 활용 시 선생님이 도움을 주신 방법으로 적용해보겠습니다
다시 한 번 감사합니다!!
답변을 작성하시기 전에 로그인 해주세요.
