소스 어디가 잘못되었는지 봐주세요

매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!
소스 어디가 잘못되었는지 봐주세요

QA

소스 어디가 잘못되었는지 봐주세요

본문

체크박스에서 기타를 선택했을때 텍스트박스를 필수입력 하려고 합니다.
(체크박스이기 때문에 중복선택을 해도 기타를 선택하면 작동해야 합니다.)

아래와 같이 했는데 작동을 안하네요

어디가 문제가 되는지 알려주세요

감사합니다.

 


        <input type="checkbox" name="choice[]" id="people1" value="선택1">
        <input type="checkbox" name="choice[]" id="people2" value="선택2">
        <input type="checkbox" name="choice[]" id="people3" value="기타">
        <input type="text" name="choice_etc" id="choice_etc">
 
<script>
       if ($("#people3").is(':checked')) {
            if ($("#choice_etc").val().trim() === '') {
                alert("기타 내용을 적어주세요.");
                $("#choice_etc").focus();
                return false;
            }
          }
</script>

 

이 질문에 댓글 쓰기 :

답변 4


$('form').on('submit', function(e) {
    // 체크박스 선택 여부 확인
    if ($("input[name='choice[]']:checked").length === 0) {
        alert("최소 한 개 이상의 항목을 선택해주세요.");
        return false;
    }
    // '기타' 선택 시 텍스트박스 필수 입력 확인
    if ($("input[name='choice[]']:checked").filter("[value='기타']").length > 0) {
        if ($("#choice_etc").val().trim() === '') {
            alert("기타 내용을 적어주세요.");
            $("#choice_etc").focus();
            return false;
        }
    }
});

해당 
if ($("#people3").is(':checked')) {
이 이벤트를 실행시 function이나 jquery로 무엇인가 해당 이벤트를 발생시켜야 하는데
현재는 이것을 실행시킬 function이나 실행시킬 연결고리가 없어서 해당 부분의 스크립트를 적용할수가 없습니다.

 

예를 들어

function chk_event(){

}

이런 이벤트 function 함수를 호출해서 처리하도록 이벤트를 걸어주셔야 해당 함수가 반응하던지 할겁니다.

소스를 다 적용해 드리면 좋겠지만 직접 공부도 하시고 왜 이렇게 되는지를 아셔야 할듯 해서

 

이렇게 남겨 놓습니다.  참고해 주세요


 


<script>
    $("input[name='choice[]']:checked").each(function() {
        if ($(this).val() === "기타") {
            if ($("#choice_etc").val().trim() === '') {
            alert("기타 내용을 적어주세요.");
            $("#choice_etc").focus();
            return false;
            }
        }
    });
</script>




<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() { 
           
             // 제출 버튼 클릭 이벤트 핸들러
            $("#submitBtn").click(function(e) { 

                 // '기타' 체크박스가 선택되었는지 확인
                var isOtherChecked = $("#people3").is(':checked'); 

                 // '기타' 입력란의 값 가져오기 및 공백 제거
                var otherInputValue = $("#choice_etc").val().trim(); 

                  // '기타'가 선택되었고 입력란이 비어있는 경우
                if (isOtherChecked && otherInputValue === '') {
                    alert("기타 내용을 적어주세요.");
                    $("#choice_etc").focus(); // 입력란에 포커스 이동
                    e.preventDefault(); // 폼 제출 방지
                    return false;
                }

                // 폼이 실제로 존재하는 경우 제출 로직 추가 가능
                // 예: $("form").submit();
            });
        });
    </script>

<label><input type="checkbox" name="choice[]" id="people1" value="선택1"> 선택1</label><br>
<label><input type="checkbox" name="choice[]" id="people2" value="선택2"> 선택2</label><br>
<label><input type="checkbox" name="choice[]" id="people3" value="기타"> 기타</label><br>
<input type="text" name="choice_etc" id="choice_etc" placeholder="기타 내용을 입력하세요"><br>
<button type="submit" id="submitBtn">제출</button>
답변을 작성하시기 전에 로그인 해주세요.
전체 20
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT