Jam's story

[JS] 라디오버튼 본문

WEB/JavaScript

[JS] 라디오버튼

애플쩀 2022. 5. 27. 16:29 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body onclick="test()">
    <fieldset>
        <legend>성별</legend>
        <input type="radio" name="gender" id="g_m" checked="checked" value="male"><label for="g_m">남자</label>
        <input type="radio" name="gender" id="g_f"  value="female"><label for="g_f">여자</label>
    </fieldset>
    <button>성별 확인</button>
    <p id="demo">남자</p>
   <script>
       function test(){
          /*  console.log("남자 라디오 버튼:"+document.getElementById("g_m").checked);
           console.log("여자 라디오 버튼:"+document.getElementById("g_f").checked); */

          /*  if(document.getElementById("g_m").checked)
            document.getElementById("demo").innerText="남자";
           if(document.getElementById("g_f").checked)
            document.getElementById("demo").innerText="여자"; */

           var genderRadios= document.querySelectorAll("[name='gender']");
           for(var i=0; i<genderRadios.length; i++){
               if(genderRadios[i].checked){
                //    document.getElementById("demo").innerText=genderRadios[i].value;
                // 라디오버튼 뒤에있는 것 ,다음요소형제
                document.getElementById("demo").innerText=genderRadios[i].nextElementSibling.innerText;
                break;
               }
           }
       }
   </script>
</body>
</html>
Document
성별

남자

저작자표시 (새창열림)

'WEB > JavaScript' 카테고리의 다른 글

[JS] select  (0) 2022.05.27
[Js] 스타일변경  (0) 2022.05.27
[JS] 외부 스크립트 파일  (0) 2022.05.27
[JS] 버튼누르면 동작 - 전구 불끄고 키기  (0) 2022.05.27
[JS] 배경색바꾸기  (0) 2022.05.25
'WEB/JavaScript' Related Articles more
Comments