[jsp] Radio 상태 변경 감지하기

---

HTML에 배치한 Radio 버튼이 실시간으로 사용자에 의해 눌릴 때마다

변경된 Radio 버튼의 value 값을 읽어오는 script를 작성해 보도록 하겠습니다

 

 

Radio 버튼 구성

---

<div style="margin-top:5px">
        <input type='radio' name='sensorDa' value='3'/>Push&nbsp;
        <input type='radio' name='sensorDa' value='4'/>Interval&nbsp;
        <input type='radio' name='sensorDa' value='5'/>On/Off&nbsp;
</div>

먼저 value값을 읽을 라디오 버튼을 위와 같이 구성하였습니다

하나의 라디오 그룹으로 묶기 위해 동일한 name인 sensorDa를 설정해 주고

그에 따른 value값을 3,4,5로 지정해 주었습니다

 

 

Radio 변경 감지

---

<script>
$('input[name="sensorDa"]').change(function(){
        var value = $(this).val();
        var checked = $(this).prop('checked');
        confirm(value);
});
</script>

소스코드 자체는 어렵지 않습니다

먼저 input 타입의 sensorDa라는 name을 가진 라디오 버튼이 change 될 때마다 function을 실행한다는 뜻입니다

이렇게 실행된 function 내부에서는 this 즉 sensorDa의 val() 값을 가져오게 됩니다

마지막으로 confirm을 통해서 해당 value값을 띄워주게 되면

라디오 버튼을 누를 때마다 팝업창이 뜨면서 선택된 value 값을 출력합니다

 

여기에서 응용하여 만약 Radio 버튼의 value가 3일 경우에는 입력 텍스트를 비활성화하고

그렇지 않을 경우에만 활성화한다는 조건의 프로그램을 만들 수도 있습니다

<script>
$('input[name="sensorDa"]').change(function(){
        var value = $(this).val();
        var checked = $(this).prop('checked');
        if(value=='3'){
                document.getElementById('sensorDc').disabled=true;
                document.getElementById('sensorUn').disabled=true;
        }else{
                document.getElementById('sensorDc').disabled=false;
                document.getElementById('sensorUn').disabled=false;
        }
});
</script>