다중체크박스 한개 이상 선택 필수 및 팝업 설정

다중체크박스 한개 이상 선택 필수 및 팝업 설정

QA

다중체크박스 한개 이상 선택 필수 및 팝업 설정

답변 1

본문

안녕하세요 고수님들!

다중체크박스에서 한 개 이상 선택하기를 필수로 수정하고 싶은데요.

구조를 어찌 수정해야할지 모르겠습니다 ㅠㅠ

 

보통 required를 추가하면 되던데 이 구조는 해당하지 않는 것 같습니다...제작했던 스킨만 활용하다 보니 코드를 새로 짜는 건 제 능력 밖이네요...

 

또 required 가 해당되는 input을 체크하지 않으면 아래 이미지↓↓↓처럼 팝업이 기본적으로 뜨던데 이 기능이 나오게 하고 싶은데 어떻게 수정하면 될까요?

 

참고로 아래 이미지↓↓↓의 type은 radio입니다...

2105704005_1711344750.4156.png

 

 

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>
답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 226
© SIRSOFT
현재 페이지 제일 처음으로