jQuery - 라디오(radio), 체크박스(checkbox) 클릭 된 요소 알기

2022. 3. 15. 22:26

라디오와 체크박스는 많이 사용을 한다. 그만큼 많이 사용을 하기 때문에 자주 사용할 수 있도록

자주 사용하는 이벤트를 기록해보자.

▶ 체크박스(checkbox) 선택된 요소 알기

이벤트 부분

$("input[type=checkbox]").on( "click",function(e){ // 체크박스 요소 클릭 이벤트 등록
    if($("input[type=checkbox]").is(':checked')){
        // 클릭이 된 이후 코드
    }else{
        // 클릭이 해제 된 이후 코드
    }
});

예제)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <title>JS Bin</title>
  <script>
    $(document).ready(function(){
      $("input[type=checkbox]").on( "click",function(e){ // 모든 체크박스요소 클릭이벤트 등록
        
        if($("input[type=checkbox]").is(':checked')){ //  체크가 되었다면
            $('#labelName-'+e.target.value).css({'color':'red'}); // 라벨 글자를 빨간색
        }else{ // 아니면
          $('#labelName-'+e.target.value).css({'color':'#000'}); // 라벨 글자를 검은색
        }
        
      });      
    });
  </script>
</head>
<body>
  <p>
    <input type="checkbox" name="newsletter" value="1">
    <label class="label" id="labelName-1">1번</label>
    <br>
    <input type="checkbox" name="newsletter" value="2">
    <label class="label" id="labelName-2">2번</label>
    <br>
    <input type="checkbox" name="newsletter" value="3">
    <label class="label" id="labelName-3">3번</label>
    <br>
    <input type="checkbox" name="newsletter" value="4">
    <label class="label" id="labelName-4">4번</label>
    <br>
    <input type="checkbox" name="newsletter" value="5">
    <label class="label" id="labelName-5">5번</label>
  </p>  
</body>
</html>

위 코드의 예제 내용을 보면 체크박스 요소를 5개 만들어주고, 클릭을 할 때마다 클릭된 체크박스 요소를

가리키는 라벨 태그의 글자 색을 바꾸는 예제이다.

체크박스 전체 요소의 클릭 이벤트를 등록해주고 이에 얻어지는 결과 값에 따라 개발을 진행하면 된다.

여기에선 체크박스 전체 요소의 선택자로 했지만, input 태그에 class 네임을 줘서 사용을 해도 된다.

결과화면

▶ 라디오 버튼(radiobutton) 선택된 요소 알기

이벤트 부분

$("input[type=radio]").on( "click",function(e){
  // e.target  선택된 타깃
  // e.target.value 선택된 타깃의 value 값
  // e.target.name 선택된 타깃의 네임
 $('#outputTxt').text(e.target.value + ' 선택되었습니다.')
});

예제)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <title>JS Bin</title>
  <style>
    #outputTxt{
       font-size:20px;
       color:red;
       border:1px solid #999;
    }
  </style>
  <script>
    $(document).ready(function(){
      $("input[type=radio]").on( "click",function(e){
          // e.target  선택된 타깃
          // e.target.value 선택된 타깃의 value 값
          // e.target.name 선택된 타깃의 네임
         $('#outputTxt').text(e.target.value + ' 선택되었습니다.')
      });      
    });
  </script>
</head>
<body>
  <p>
    <input type="radio" name="newsletter" value="1">
    <label class="label" id="labelName-1">1번</label>
    <br>
    <input type="radio" name="newsletter" value="2">
    <label class="label" id="labelName-2">2번</label>
    <br>
    <input type="radio" name="newsletter" value="3">
    <label class="label" id="labelName-3">3번</label>
    <br>
    <input type="radio" name="newsletter" value="4">
    <label class="label" id="labelName-4">4번</label>
    <br>
    <input type="radio" name="newsletter" value="5">
    <label class="label" id="labelName-5">5번</label>
  </p>
  
  <p id="outputTxt"></p>
</body>
</html>

위 코드의 내용은 라디오 버튼의 요소를 5개 만들어서 각 라디오 버튼에 value 값을 순서대로 넣고,

이 라디오 버튼의 클릭 이벤트를 등록하여 클릭된 라디오 버튼의 요소를 알아낸다.

jQuery 부분을 보면

e.target ☜ 선택된 타깃

e.target.value ☜ 선택된 타깃의 벨류 값을 얻을 수 있다. 이 벨류 값은 라디오 버튼 타입의 input 태그를

보면 value 지정했는데 이 값을 얻을 수 있다.

e.target.name ☜ 선택된 타깃의 네임을 얻을 수 있다. 위 코드상 newsletter이니 console.log 찍어보면

newsletter 이 값이 찍힌다.

이 라디오 버튼의 선택자도 각 input 태그마다 class 네임을 줘서 클릭 이벤트를 등록도 가능하다.

결과화면

저작자표시 비영리 변경금지

'web 언어 > jQuery' 카테고리의 다른 글

jQuery - 가시성(visible/hidden)을 기준으로 요소 선택하기 (0)	2022.03.16
jQuery - 현재 애니메이션(animate) 중인 요소 선택하기 (0)	2022.03.16
jQuery - DOM 요소 복제해서 다른 요소에 붙여넣기 (0)	2022.03.15
jQuery - 셀렉터(selector) 선택자 (자식필터를 사용하여 요소선택 - nth-child()) (0)	2022.03.14
jQuery - 셀렉터(selector) 선택자 (위치필터를 이용하여 요소 선택- first, last, even, odd, eq(), gt(), lt()) (0)	2022.03.12

열공의 기록