관리 메뉴

웹개발 블로그

[jQuery] (중요)confrim()과 type="radio" 본문

◆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());