자바스크립트/jQuery로 input checkbox name값, value 값으로 체크하기

소개

이 블로그 포스팅에서는 자바스크립트/jQuery를 사용하여 input checkbox 요소를 name과 value 값을 이용하여 체크하는 방법에 대해 알아보겠습니다. input checkbox를 사용하면 여러 개의 값을 저장해야 할 때가 있습니다. name 속성을 동일하게 유지하면서 value만 다르게 설정하면 배열로 쉽게 값을 저장할 수 있어서 자주 사용되는 방식입니다. 하지만 이렇게 저장된 값을 다시 불러오는 것은 조금 까다로울 수 있습니다. 이러한 문제를 해결하기 위해 name과 value를 동시에 활용하여 체크박스를 선택할 수 있습니다.

방법

jQuery를 사용하여 input checkbox 요소를 name과 value 값을 이용하여 체크하는 방법은 매우 간단합니다. 이를 위해 prop() 메서드를 활용합니다.

$("input[name='name값'][value='value값']").prop("checked", true);

위의 예제에서 name값과 value값을 실제 요소의 이름과 값을 원하는 값으로 대체하여 사용하면 됩니다. 이렇게 하면 해당하는 name과 value를 가진 input checkbox가 체크됩니다.

예제

다음은 실제 예제입니다.

<!DOCTYPE html>
<html>
<head>
  <title>체크박스 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <h2>음식을 선택하세요</h2>
  <input type="checkbox" name="food" value="pizza" id="pizza-checkbox"> <label for="pizza-checkbox">피자</label><br>
  <input type="checkbox" name="food" value="burger" id="burger-checkbox"> <label for="burger-checkbox">버거</label><br>
  <input type="checkbox" name="food" value="sushi" id="sushi-checkbox"> <label for="sushi-checkbox">초밥</label><br>
  <input type="checkbox" name="food" value="pasta" id="pasta-checkbox"> <label for="pasta-checkbox">파스타</label><br>

  <button id="check-pizza">피자 선택</button>
  <button id="check-sushi">초밥 선택</button>
</body>
<script>
  $(document).ready(function() {
    // 피자 체크박스를 체크합니다.
    $("#check-pizza").click(function() {
      $("input[name='food'][value='pizza']").prop("checked", true);
    });

    // 초밥 체크박스를 체크합니다.
    $("#check-sushi").click(function() {
      $("input[name='food'][value='sushi']").prop("checked", true);
    });
  });
</script>
</html>

위의 예제에서는 음식 선택을 위해 4개의 checkbox가 있습니다. "피자 선택" 버튼과 "초밥 선택" 버튼을 클릭하면 각각 피자와 초밥이 체크되도록 설정되어 있습니다.

마무리

이렇게 자바스크립트/jQuery를 이용하여 input checkbox 요소를 name과 value 값을 이용하여 체크하는 방법에 대해 알아보았습니다. name과 value를 활용하여 특정 체크박스를 쉽게 선택할 수 있으므로 유용하게 활용할 수 있습니다. 자신의 프로젝트에서 이 방법을 활용하여 다양한 상황에 맞는 체크박스 기능을 구현해 보시기 바랍니다.

'Lect & Tip > javascript, jQuery' 카테고리의 다른 글

jQuery 동적 click 이벤트 처리하기 (0)	2023.08.23
jQuery를 이용하여 요소의 이름으로 현재 요소의 타입 알아내기 (0)	2023.08.15
2023년 일용직 소득세 계산기 (0)	2023.07.03
챗GPT 로또 당첨번호 예측 lotto 1073회 분석 (0)	2023.06.23
javascript classList.toggle로 jquery addClass, removeClass, toggleClass 구현하기 / 더보기 버튼 클릭시 영역 확장 (0)	2022.11.02

자바스크립트/jQuery로 input checkbox name값, value 값으로 체크하기