input 선택 변경 질문드립니다.

input 선택 변경 질문드립니다.

QA

input 선택 변경 질문드립니다.

본문

안녕하세요

input radio 버튼 선택에 따라 

나오는 화면이 달라지게 해놨습니다.

 

소스는 아래와 같습니다.

 

 


<input type="radio" id="aa01" class="aa01" name="wr_1" value="가상계좌" onclick='getCheckboxValue(event)'/> 
<input type="radio" id="aa02" class="aa02" name="wr_1" value="카드" onclick='getCheckboxValue(event)'/> 
 
<div class="aa01_text">
계좌번호 출력
</div>
<div class="aa02_text">
<input type="text" id="wr_2" name="wr_2">
</div>
 
 
            <script>
            $(".aa01").click(function(){
              $(".aa01_text").css("display","block");
              $(".aa02_text").css("display", "none");
              $(".aa02_text").val("");
            });
            $(".aa02").click(function(){
              $(".aa02_text").css("display","block");
              $(".aa01_text").css("display", "none");
              $(".aa01_text").val("");
            });
             </script>
 

 

이런식으로 잘 사용중인데요

aa01 을 선택했을때는 계좌번호만 나와서 상관이 없는데

aa02 를 선택했을때는 input이 나오는 wr_2 가 필수입력이 되어야 합니다.

 

걸러주는 스크립트에서

            if(form.wr_2.value == ''){
            alert("카드번호입력");
           form.wr_2.focus();
           return false;
          }

이런식으로 하면

aa01을 눌러서 확인버튼을 눌러도 스크립트문이 떠버립니다.

 

가능한 방법이 없을까요?

 

이 질문에 댓글 쓰기 :

답변 2

아래처럼 걸러보세요


if($(".aa02:checked").length && form.wr_2.value == ''){
    alert("카드번호입력");
    form.wr_2.focus();
    return false;
}

$(".aa02").is(':checked')도 가능해요

답변감사합니다^^
첫번째 써주신건 반응이 없어서
아래 코멘트 달아주신걸로 해보니
걸러지긴 하는데
얼럿 후 완료창으로 그냥 넘어가버립니다. ㅠ

if($(".aa02").is(':checked')){
    alert("카드번호입력");
    form.wr_2.focus();
    return false;
}

문제는 form.wr_2.value가 aa01 옵션에서도 존재하기 때문에 발생합니다. 
이를 해결하기 위해 조건문에서 wr_2 input 요소의 상태를 확인하고자 하는 input 요소의 상태를 함께 검사하도록 코드를 수정해야 합니다.
아래는 wr_2 input 요소의 상태를 확인하며 aa02 옵션을 선택한 경우에만 검사하도록 변경한 코드입니다.


$(".btn_submit").click(function(){
    if($(".aa02").is(":checked") && $("#wr_2").val() == ''){
        alert("카드번호를 입력해주세요.");
        $("#wr_2").focus();
        return false;
    }
});


위 코드를 .btn_submit 버튼을 클릭할 때 실행되도록 바꾸어 사용하시면 됩니다. 
aa02를 선택한 경우에만 wr_2의 값을 확인하고, 
빈 값인 경우에는 알림창을 띄우고 입력 상자에 포커스를 맞춥니다.

 

챗GPT 답변입니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 73
QA 내용 검색

회원로그인

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