๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
Lect & Tip/javascript, jQuery

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ/jQuery๋กœ input checkbox name๊ฐ’, value ๊ฐ’์œผ๋กœ ์ฒดํฌํ•˜๊ธฐ

by ๋‚ฏ์„ ๊ณต๊ฐ„2019 2023. 7. 31.

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ/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๋ฅผ ํ™œ์šฉํ•˜์—ฌ ํŠน์ • ์ฒดํฌ๋ฐ•์Šค๋ฅผ ์‰ฝ๊ฒŒ ์„ ํƒํ•  ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ ์œ ์šฉํ•˜๊ฒŒ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ž์‹ ์˜ ํ”„๋กœ์ ํŠธ์—์„œ ์ด ๋ฐฉ๋ฒ•์„ ํ™œ์šฉํ•˜์—ฌ ๋‹ค์–‘ํ•œ ์ƒํ™ฉ์— ๋งž๋Š” ์ฒดํฌ๋ฐ•์Šค ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•ด ๋ณด์‹œ๊ธฐ ๋ฐ”๋ž๋‹ˆ๋‹ค.

๋ฐ˜์‘ํ˜•

๋Œ“๊ธ€