003. jQuery ID중복과 라디오 박스 사용 예제 radio box control example

이전에 선택자(selector)를 이용할때 ID가 중복이 되면 안된다고 했었는데

라디오 박스를 사용하려면 뭔가 난감할 수 있습니다

라디오 태그하나하나에 ID를 바꿔주자니 이벤트 처리할게 늘어나거든요

<!-- https://zelkun.tistory.com/entry/003-jQuery-ID중복과-라디오-박스-radio-box-control -->
<script src="https://code.jquery.com/jquery-latest.min.js" type="application/javascript"></script>
<script type="application/javascript">
jQuery(document).ready(function(){
    console.log('ready')

    jQuery("#button").click(function(){
        alert(jQuery("#radio :checked").is(":checked"))
        alert(jQuery("#radio1 :checked").is(":checked"))
    });
    
    jQuery("#radio").click(function(){
       alert(jQuery(this).val()) 
    });

    jQuery("#radio1").click(function(){
        alert(jQuery(this).val()) 
    });
    
});
</script>

<button name="button" id="button">submit</button>
<div>
    <span>Apple: </span>
    <input type="radio" name="radio" id="radio" value="op1">iPhone7
    <input type="radio" name="radio" id="radio" value="op2">iPhone8
    <input type="radio" name="radio" id="radio" value="op3">iPhoneX
</div>
<div>
    <span>Samsung: </span>
    <input type="radio" name="radio1" id="radio1" value="op1">Galaxy Note10
    <input type="radio" name="radio1" id="radio1" value="op2">Galaxy S10
    <input type="radio" name="radio1" id="radio1" value="op3">Galaxy S
</div>

example: https://jsfiddle.net/zelkun/9ygqbe81/

 

대충만들긴했지만 위 예제를 보면 라디오마다 같은 ID를 넣어놨는데

대충 보면 submit 버튼을 누르면 라디오박스 체크상태를 반환할것 같지만

실제로는 첫번째로 ID가 선언된 라디오 박스에서만 체크 유무를 판단하게 됩니다

click 이벤트 역시 동일합니다

jQuery에서 Id의 중복을 처리해주지 않으니깐요

한마디로 쓸모없는 코드...

 

jQuery 초보라면 해볼법 하네요

<span>Apple: </span>
<input type="radio" name="radio" id="radio" value="op1" onclick="javascript:fn_click('op1');">iPhone7
<input type="radio" name="radio" id="radio" value="op2"onclick="javascript:fn_click('op2');">iPhone8
<input type="radio" name="radio" id="radio" value="op3"onclick="javascript:fn_click('op3');">iPhoneX

example: https://jsfiddle.net/zelkun/9ygqbe81/2/

radio 박스에 하나씩 onclick이벤트를 주고

선택한 값을 받아서 처리해도 되긴합니다

function 을 따로 만들어줘야 하니 귀찮고..

 

결론적으로 ID를 안쓰고 tag를 이용해서 라디오박스에 접근하면 됩니다

같은 tag에 동일한 이름을 사용하니깐요

<!-- https://zelkun.tistory.com/entry/003-jQuery-ID중복과-라디오-박스-radio-box-control -->
<script src="https://code.jquery.com/jquery-latest.min.js" type="application/javascript"></script>
<script type="application/javascript">
jQuery(document).ready(function(){
    console.log('ready')

    jQuery("#button").click(function(){
        var radio = jQuery("input:radio[name='radio']:checked");
        var radio1 = jQuery("input:radio[name='radio1']:checked");

        if(radio.val() == undefined || radio1.val() == undefined){
            alert("선택해주세요");
        } else{
            console.log(radio.val(), radio1.val())
        }
    });
    jQuery("input:radio[name='radio'], input:radio[name='radio1']").click(function(){
        console.log(jQuery(this).val())
    });
});
</script>

<button name="button" id="button">submit</button>
<div>
    <span>Apple: </span>
    <input type="radio" name="radio" id="radio" value="op1" >iPhone7
    <input type="radio" name="radio" id="radio" value="op2">iPhone8
    <input type="radio" name="radio" id="radio" value="op3">iPhoneX
</div>
<div>
    <span>Samsung: </span>
    <input type="radio" name="radio1" id="radio1" value="op1">Galaxy Note10
    <input type="radio" name="radio1" id="radio1" value="op2">Galaxy S10
    <input type="radio" name="radio1" id="radio1" value="op3">Galaxy S
</div>

example: https://jsfiddle.net/zelkun/9ygqbe81/3/

 

 jQuery("input:radio[name='radio']:checked");

선택자를 살펴보면 input 태그중 radio 그중 name이 radio 이고 :checked 선택유무를 확인하는데

선택된게 없다면 값을 보려면 undefined 를 반환합니다

이를 이용해서 값을 선택하지 않으면 alert을 띄우고 선택을 강요하도록 되있는데요

 

라디오박스를 하나만 쓴다면 "input[type='radio']" 를 써도 괜찮습니다

심지어 "input:radio" 를 써도 됩니다

 

하지만 나는 꼭 ID를 쓸거다 하는분은…

편법이지만 이렇게도 쓸수 있긴 합니다

<!-- https://zelkun.tistory.com/entry/003-jQuery-ID중복과-라디오-박스-radio-box-control -->
jQuery(document).ready(function(){
    console.log('ready')

    jQuery("#button").click(function(){
        var radio = null;
        var radio1 = null;
        jQuery("input:radio").each(function(i,d){
            var data = jQuery(d);
            if(data.attr("id") == "radio" && data.is(":checked")){
                radio = data;
            }
            if(data.attr("id") == "radio1" && data.is(":checked")){
                radio1 = data;
            }
        });
        
        if(radio == null || radio1 == null){
            alert("선택해주세요");
        } else{
            console.log(radio.val(), radio1.val())
        }
    });
    jQuery("input:radio[name='radio'], input:radio[name='radio1']").click(function(){
        console.log(jQuery(this).val())
    });
});

example: https://jsfiddle.net/zelkun/9ygqbe81/4/

 

라디오박스 전체를 순회하고 id를 찾으면 되니까요

근데 별로 권하고 싶진 않네요