◆JavaScript/jQuery
[jQuery] (중요)confrim()과 type="radio"
쿠키린
2023. 2. 1. 12:50
<input type="hidden" id="c_pick_up_temp" value="${hospitalView.c_pick_up}">
...
<td>
<input type="radio" name="c_pick_up" id="pick_up_daytime" value="0" onclick="return confirmChnPickUp(0);" <c:if test="${hospitalView.c_pick_up eq '0'}">checked</c:if>>
<label for="pick_up_daytime" style="margin-right: 5px;">주간</label>
<!-- 저녁수거 선택 시 LBX필드 또는 24/7 병원인지 체크된 내용만 저녁수거 선택가능(검사 필수!)-->
<input type="radio" name="c_pick_up" id="pick_up_dinner" value="1" onclick="return confirmChnPickUp(1);" <c:if test="${hospitalView.c_pick_up eq '1'}">checked</c:if>>
<label for="pick_up_dinner">야간</label>
</td>
...
상황 : radio버튼 값을 변경하면 -> 변경하시겠습니까? 여쭤봐야하며
팝업창이 뜨며 esc 또는 취소 버튼을 누르면 선택한 값으로 변경되면 안된다!!!
function confirmChnPickUp(c_pick_up) {
//console.log("기존 값=> "+$("#c_pick_up_temp").val());
if(confirm("변경하시겠습니까?")){
//확인(true)
$("#c_pick_up_temp").val(c_pick_up);//기존 값 변경
//console.log("기존 값 변경(temp) => "+$("#c_pick_up_temp").val());
//console.log("기존 값 변경 전 => "+$(":input:radio[name=c_pick_up]").val());
$(":input:radio[name=c_pick_up]").val($("#c_pick_up_temp").val());//기존값 변경
//console.log("기존 값 변경 후 => "+$(":input:radio[name=c_pick_up]").val());
if(!dinnerCheck(c_pick_up)){
return;
}
}else{
//취소(false)
if(window.event.keyCode==27){//ESC
$(":input:radio[name=c_pick_up]").val($("#c_pick_up_temp").val()).trigger('change');
//console.log("강제 변경(temp)=> "+$("#c_pick_up_temp").val());
//console.log("강제 변경=> "+$(":input:radio[name=c_pick_up]").val());
return false;
}else{
$(":input:radio[name=c_pick_up]").val($("#c_pick_up_temp").val()).trigger('change');
//console.log("강제 변경(temp)=> "+$("#c_pick_up_temp").val());
//console.log("강제 변경=> "+$(":input:radio[name=c_pick_up]").val());
return false;
}
}
}
하지만!!!!
confrim()함수를 사용 후
확인(true)
취소(false)
중
💥🔰취소를 눌러도 변경한 값으로 클릭이 된다!!!!!!.(한참을 고생했다ㅠㅠㅠㅠ)💥🔰
- 이유는 corfirm함수는 체크하는 기능들이랑 같이 사용시 잘 안된다....(값 변경도 취소도..)
[문제점 정리]
- 기존값을 가지고 있다가 ese 또는 취소 버튼을 클릭 시 강제로 클릭하게 할거며
- true여도 값이 변경이 안되는 상황도 보였다!!! <-- 라디오 값도 변경해줄 거다.
그럴때는 강제 trigger()함수를 사용하여
기존 값을저장한 뒤에 그 값을 넣어주면 된다.
[✨해결✨]
① 원래 값으로 강제 클릭 -> $(":input:radio[name=c_pick_up]").val($("#c_pick_up_temp").val()).trigger("chage"));
② 기존값 변경 -> $(":input:radio[name=c_pick_up]").val($("#c_pick_up_temp").val());