[JavaScript / jQuery] radio 버튼과 input textBox를 이용한 선택지 구현

 

 

- 전체 버튼은 radio 버튼이고, 옆에 20세 ~ 100세는 textbox로 이루어 져 있다.

<div class="filter-age">
    <div class="filter-radio_btn">
        <input type="radio" id="age-All-radio" name="Age-All" value="Age-all" checked>
        <label for="age-All-radio"> 전체 </label>
    </div>
    <input type="text"  id="Age-min" value="20세"> ~
    <input type="text" id="Age-max" value="100세">
</div>

 

여기서 text Box를 이용해 값을 수정하면 radio의 체크가 풀리고, 버튼의 색깔 점멸이 사라지며

다시 전체 버튼을 클릭하면 20세~100세로 text가 수정되도록 구현을 하려고한다.

 

	const radioBtn = document.getElementById('age-All-radio');
	const AgeMinInput = document.getElementById('Age-min');
	const AgeMaxInput = document.getElementById('Age-max');
	
	  radioBtn.addEventListener('click', function () {
		    // 라디오 클릭 시 텍스트 값 초기화
		  AgeMinInput.value = "20세";
		  AgeMaxInput.value = "100세";
		  });
	  
	  // 텍스트 수정 시 라디오 체크 해제
	  AgeMinInput.addEventListener('input', function () {
	    radioBtn.checked = false;
	  });

	  AgeMaxInput.addEventListener('input', function () {
	    radioBtn.checked = false;
	  });

 

위와 같이 구현하면 된다.