상세 컨텐츠

본문 제목

input radio 사용법 데이터 가져오고 바꿔주기

FrontEnd/JQuery

by H_Develop 2022. 11. 25. 10:17

본문

JSP 

input radio를 사용하고 사용 유무에 따라 value 값을 Y, N으로 주었다.

value 값은 들어오지 않아 data-val 요소를 이용하여 넘겨준다

			<div class="row mb-2">
				<input type="hidden" name="useYn">
				<!-- 사용유무 -->
				<label class="col-sm-3 col-form-label required"><spring:message code="ppkBamBa0030.detail.useYn" /></label>
				<div class="col-sm-9">
					<label>
						<input type="radio" name="tmpUseYn" value="Y" data-val="Y">
						<spring:message code="ppkBamBa0030.detail.useY" />
					</label>
					<label>
						<input type="radio" name="tmpUseYn" value="N" data-val="N">
						<spring:message code="ppkBamBa0030.detail.useN" />
					</label>
				</div>
			</div>

 

 

js 데이터를 받아 Y,N값을 확인하고 없으면 default로 Y를 준다

 

var pramUseYn = 'Y'
	if(param.useYn) {
		pramUseYn = param.useYn;
	}
	$('#ocBa0030 input:radio[name=tmpUseYn][data-val="'+pramUseYn+'"]').prop('checked', true);
	$('#ocBa0030 input[name="useYn"]').val(param.useYn);
	$('#ocBa0030 input:radio[name=tmpUseYn]').off('change.ocBa0030UseYn').on('change.ocBa0030UseYn', function(){
	$('#ocBa0030 input[name="useYn"]').val($(this).data('val'));

paramUseYn 변수에 데이터 값을 넣어주고

그에 맞는 input에 prop함수를 통해 cheched를 해준다.

값을 param.useYn으로 넣고

off() on() 로 사용유무의 두개 라디오를 서로 선택할 때마다 반응을 주어

data('val')로 데이터를 넣는다 ( data-val을 사용했기에 data('val')을 사용한다.)

 

관련글 더보기