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

자바스크립트/jQuery로 Input checkbox를 Name과 Value 값으로 체크하기

소개
이 블로그 포스팅은 자바스크립트와 jQuery를 이용하여 HTML 입력 폼인 input checkbox의 Name과 Value 값으로 체크하는 방법에 대해 설명합니다. 일반적으로 체크박스를 생성할 때는 동일한 Name을 가진 여러 개의 값을 저장해야 할 때가 있습니다. 이때, 배열로 값을 저장하는 방법이 자주 사용됩니다. 하지만 이렇게 저장된 값을 불러와 체크박스를 선택하는 것은 조금 까다로울 수 있습니다. 하지만 Name과 Value를 동시에 사용하여 체크박스를 선택하는 방법을 알면 간단하게 처리할 수 있습니다.

본문

Name과 Value 값으로 체크박스 선택하기 - JQuery

보통 체크박스를 생성할 때 Name 속성은 같지만 Value만 다르게 하여 여러 개의 옵션을 생성합니다. 이때, 동일한 Name을 가진 여러 개의 체크박스를 한 번에 선택하기 위해서는 jQuery를 이용하면 간단하게 처리할 수 있습니다.

예제를 통해 설명해 보겠습니다. 다음과 같은 HTML 코드가 있다고 가정합니다:

<form id="checkboxForm">
  <input type="checkbox" name="fruit" value="apple"> Apple<br>
  <input type="checkbox" name="fruit" value="orange"> Orange<br>
  <input type="checkbox" name="fruit" value="banana"> Banana<br>
</form>

위의 코드는 세 가지 과일(Apfel, Orange, Banana)을 선택할 수 있는 체크박스를 생성합니다. 여기서 우리의 목표는 JavaScript/jQuery를 사용하여 Apple과 Orange을 체크하는 것입니다.

jQuery code 예제

// jQuery를 사용하여 Apple과 Orange 체크하기
$(document).ready(function() {
  var name = "fruit";
  var itemsToCheck = ["apple", "orange"];

  for (var i = 0; i < itemsToCheck.length; i++) {
    var item = itemsToCheck[i];
    $("input[name=" + name + "][value=" + item + "]").prop("checked", true);
  }
});

위의 코드를 살펴보면, 우선 Name 속성과 체크하고자 하는 값을 변수로 지정합니다. 그리고 for 루프를 통해 itemsToCheck 배열에 저장된 값을 하나씩 불러와서 해당하는 체크박스를 선택합니다. prop("checked", true)를 사용하여 체크를 설정합니다.

이렇게 하면 벨류 값이 Apple과 Orange인 경우에는 체크된 상태로 표시됩니다.

input checkbox name과 value 값으로 선택하기 - JavaScript

이 포스팅에서는 jQuery를 사용하여 체크박스를 선택하는 방법을 소개하였습니다. jQuery를 사용하지 않고 순수한 JavaScript만으로도 동일한 작업을 수행할 수 있습니다. 선택한 방식에 따라 코드를 구성하시면 됩니다.

자바스크립트 코드

<form id="checkboxForm">
  <input type="checkbox" name="fruit" value="apple"> Apple<br>
  <input type="checkbox" name="fruit" value="orange"> Orange<br>
  <input type="checkbox" name="fruit" value="banana"> Banana<br>
</form>

<script>
  document.addEventListener("DOMContentLoaded", function() {
    var name = "fruit";
    var itemsToCheck = ["apple", "orange"];

    for (var i = 0; i < itemsToCheck.length; i++) {
      var item = itemsToCheck[i];
      var checkboxes = document.querySelectorAll('input[name="' + name + '"][value="' + item + '"]');

      checkboxes.forEach(function(checkbox) {
        checkbox.checked = true;
      });
    }
  });
</script>

이와 같이 JavaScript의 querySelectorAll 메서드를 사용하여 체크박스를 선택할 수 있습니다. 코드의 핵심 로직은 jQuery와 크게 다르지 않으며, 선택한 방식에 따라 알맞은 코드를 사용하시면 됩니다.

결론

이렇게 JavaScript와 jQuery를 이용하여 Name과 Value 값을 동시에 활용하여 체크박스를 선택하는 방법을 알아보았습니다. 체크박스의 Name과 Value를 조합하여 특정 옵션들을 선택하는 것은 여러 상황에서 유용하게 사용될 수 있습니다. JavaScript와 jQuery를 활용하여 웹 폼을 조작하는 데에 응용할 수 있는 다양한 방법들을 탐구해 보시기 바랍니다.