소스 어디가 잘못되었는지 봐주세요
본문
체크박스에서 기타를 선택했을때 텍스트박스를 필수입력 하려고 합니다.
(체크박스이기 때문에 중복선택을 해도 기타를 선택하면 작동해야 합니다.)
아래와 같이 했는데 작동을 안하네요
어디가 문제가 되는지 알려주세요
감사합니다.
<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>
답변을 작성하시기 전에 로그인 해주세요.