ASP.NET MVC에서 체크박스 사용법 & 다중 선택 처리 방법 (jQuery + foreach 예제 포함)

 

✅ ASP.NET MVC에서 체크박스 사용법 & 다중 선택 처리 방법 (jQuery + foreach 예제 포함)

 

체크박스는 다중 선택이 가능한 폼 요소로 설문, 옵션 설정, 알림 설정 등에서 자주 사용됩니다.
이번 포스트에서는 아래 내용을 실전 위주로 정리했습니다.

• HTML 체크박스 구성
• jQuery로 체크된 항목 모두 가져오기
• MVC에서 선택된 리스트 처리하기
• foreach로 항목 반복 출력

---

✅ STEP 1. HTML로 체크박스 구성하기

<label><input type="checkbox" name="hobby" value="운동"> 운동</label>
<label><input type="checkbox" name="hobby" value="독서"> 독서</label>
<label><input type="checkbox" name="hobby" value="여행"> 여행</label>
<label><input type="checkbox" name="hobby" value="게임"> 게임</label>

📝 name="hobby"로 그룹화하고, value 속성에 전달될 값을 설정합니다.

---

✅ STEP 2. jQuery로 체크된 항목 모두 가져오기

$("#submitBtn").click(function() {
    let checked = [];
    $("input[name='hobby']:checked").each(function() {
        checked.push($(this).val());
    });

    console.log("선택된 취미:", checked); // 배열로 출력됨
});

✅ each() 반복문을 통해 선택된 체크박스 값을 수집할 수 있습니다.
✅ 배열 형태로 수집되므로 서버 전송도 간편!

---

✅ STEP 3. ASP.NET MVC에서 선택된 체크박스 값 처리

📌 모델(Model)

public class HobbyModel
{
    public List<string> SelectedHobbies { get; set; }
}

📌 컨트롤러

[HttpPost]
public ActionResult Submit(HobbyModel model)
{
    // model.SelectedHobbies에는 체크된 항목 리스트가 들어옴
    return View("Result", model);
}

📌 뷰(View)

@model HobbyModel

<form method="post" action="/Home/Submit">
    @foreach (var hobby in new[] { "운동", "독서", "여행", "게임" })
    {
        <label>
            <input type="checkbox" name="SelectedHobbies" value="@hobby"
                   @(Model.SelectedHobbies != null && Model.SelectedHobbies.Contains(hobby) ? "checked" : "") />
            @hobby
        </label>
    }

    <button type="submit" id="submitBtn">제출</button>
</form>

🌀 SelectedHobbies 이름으로 폼에서 전송되며, MVC에서는 자동으로 바인딩됩니다.
🌀 foreach로 라벨/값을 반복 생성하면 코드 유지 관리도 쉽습니다.

---

✅ 보너스: 선택된 값 출력 예시 (foreach 반복)

@model HobbyModel

<h3>선택된 취미 목록</h3>
<ul>
    @foreach (var hobby in Model.SelectedHobbies ?? new List<string>())
    {
        <li>@hobby</li>
    }
</ul>

✔️ foreach를 사용해 뷰에서 선택된 값을 깔끔하게 출력 가능!

---

 

🔍 STEP 4. 개별 체크 여부 확인하기

사용자가 체크한 항목 하나하나를 조건에 따라 처리하고 싶을 때 아래처럼 확인할 수 있습니다.

// 특정 항목이 체크되었는지 확인
if ($("input[name='hobby'][value='독서']").is(":checked")) {
    console.log("독서가 선택됨");
} else {
    console.log("독서는 선택 안 됨");
}

📝 실시간 제어가 필요한 경우, change 이벤트를 활용하세요.

$("input[name='hobby']").on("change", function() {
    let label = $(this).parent().text().trim();
    let status = $(this).is(":checked") ? "체크됨" : "체크 해제됨";
    console.log(`${label} 항목이 ${status}`);
});

---

🏷️ STEP 5. 선택된 라벨 출력하기

체크된 항목의 value 값뿐 아니라, 실제로 사용자에게 보여진 텍스트(라벨) 를 가져오고 싶을 때:

let selected = [];

$("input[name='hobby']:checked").each(function() {
    let label = $(this).closest("label").text().trim();
    selected.push(label);
});

console.log("선택된 라벨:", selected);

✔️ .closest("label") 또는 .parent() 로 라벨 텍스트를 추출
✔️ 실제로 서버 전송 외에 UI 표시에도 유용

---

🧩 STEP 6. key:value 형태로 데이터 만들기

비즈니스 로직이나 API 전송 시 key:value 쌍으로 구성된 데이터 객체를 만들고 싶은 경우:

✅ 1. HTML에 data-속성 추가

<label>
  <input type="checkbox" name="hobby" value="reading" data-label="독서"> 독서
</label>

✔️ value는 영문 키 / data-label은 사용자 표시용 값

✅ 2. jQuery로 key:value 객체 만들기

let hobbyMap = {};

$("input[name='hobby']:checked").each(function() {
    let key = $(this).val(); // value 속성
    let value = $(this).data("label"); // data-label 속성
    hobbyMap[key] = value;
});

console.log(hobbyMap);
// 예시 출력: { reading: '독서', travel: '여행' }

🧠 이 객체는 JSON.stringify로 API에 전송하거나 로컬스토리지 저장에도 활용 가능합니다.

---

✨ 보너스 팁: UI 요소에 반영하기

let html = "";
for (const [key, value] of Object.entries(hobbyMap)) {
    html += `<li>${value} (${key})</li>`;
}
$("#hobbyList").html(html);

<ul id="hobbyList"></ul>

---

 

✅ 마무리하며

체크박스를 활용한 다중 선택은 사용자와의 상호작용을 높이는 데 탁월합니다.
이번 글에서 다룬 방법은 다음과 같은 장점이 있습니다:

• 프론트: jQuery로 선택값 쉽게 제어
• 백엔드: MVC에서 리스트 형태로 간단하게 처리
• 뷰: foreach로 반복 출력 처리 깔끔하게 구현

기능                                                 설명

개별 체크 확인	특정 항목이 선택됐는지 여부를 확인
라벨 출력	사용자에게 보이는 텍스트를 추출
key:value 구성	value=key, data-label=value 형태로 매핑

이 기능들을 조합하면 체크박스를 더 동적이고 실용적인 UI로 확장할 수 있습니다.