본문 바로가기

프로그래밍관련/javascript

[jquery] input - radio

<input type="radio" name="iamRadio" value="1">
<input type="radio" name="iamRadio" value="2">
<input type="radio" name="iamRadio" value="3">
<input type="radio" name="iamRadio" value="4">

//Get checked radio value
$('input[name="iamRadio"]:checked').val();
//return checked radio value
$('input[name="iamRadio"]:radio:checked').val();
//return checked radio value

radio에 checked 된 것이 없으면 undefiend를 반환합니다.

defualt로 checked를 명시하는 것이 좋을듯 ㅡㅡㅋ

참고로 동적으로 radio 또는 checkbox를 생성 또는 말소시키는 경우 ie에서 for문을 이용한 checked 확인으로 value 값을 꺼낼때 정상적으로 반환되지 않는 경우가 있는데 jquery를 이용하면 원하는 값이 반환됩니다.
fuck ie, thanks jquery

//Set radio checked
$('input[name="iamRadio"]:radio:input[value="1"]').attr('checked', 'checked'); // from value
$('#iamRadio1').attr('checked', 'checked'); // from id

Mootools 사용하다 Jquery를 처음 사용할땐 selector가 불편하다고 느꼈는데....
좋네요. ㅜ_ㅜ;
다만 반환된 DOM 객체의 기본 메소드를 확장한게 아니라 자체구현이라 기본 자바스크립트 코드가 안먹히는건 조금 불편합니다. ㅡ..ㅡ;


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<style>
    .cur {
        cursor: pointer;
    }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
    function getRadioValue(){
        alert($('input[name="iamRadio"]:checked').val());
    }
    function getRadioValue2(){
        alert($('input[name="iamRadio"]:radio:checked').val());
    }
    function checkedRadio(v){
        $('input[name="iamRadio"]:radio:input[value="' + v + '"]').attr('checked', 'checked');
    }
</script>
</HEAD>
<body>
<input type="radio" name="iamRadio" id="iamRadio1" value="1">
<span onclick="$('#iamRadio1').attr('checked', 'checked');" class="cur">chekced from id</span>
<span onclick="checkedRadio('1');" class="cur">chekced from value</span>
<br>
<input type="radio" name="iamRadio" id="iamRadio2" value="2">
<span onclick="$('#iamRadio2').attr('checked', 'checked');" class="cur">chekced from id</span>
<span onclick="checkedRadio('2');" class="cur">chekced from value</span>
<br>
<input type="radio" name="iamRadio" id="iamRadio3" value="3">
<span onclick="$('#iamRadio3').attr('checked', 'checked');" class="cur">chekced from id</span>
<span onclick="checkedRadio('3');" class="cur">chekced from value</span>
<br>
<input type="radio" name="iamRadio" id="iamRadio4" value="4">
<span onclick="$('#iamRadio4').attr('checked', 'checked');" class="cur">chekced from id</span>
<span onclick="checkedRadio('4');" class="cur">chekced from value</span>
<br>
<input type="button" value="getRadioValue" onclick="getRadioValue();">
<input type="button" value="getRadioValue2" onclick="getRadioValue2();">
</body>
</HTML>