ASP.NET MVC에서 라디오버튼 사용하는 완벽 가이드 (+jQuery 예제 포함)

✅ ASP.NET MVC에서 라디오버튼 사용하는 완벽 가이드 (+jQuery 예제 포함)

 

사용자 선택을 유도하는 가장 직관적인 UI 요소 중 하나는 라디오버튼입니다.
특히 ASP.NET MVC로 웹사이트를 구축할 때, 라디오버튼은 설문이나 옵션 선택 등에서 필수적으로 사용됩니다.

이 글에서는 다음을 설명합니다:

• HTML로 라디오버튼 구성하기
• jQuery로 체크/체크 해제 제어
• MVC에서 선택된 값 처리하기

웹 개발자나 ASP.NET 입문자에게 매우 실용적인 가이드가 될 것입니다.

---

✅ STEP 1. HTML 라디오버튼 기본 구성

<label>
  <input type="radio" name="gender" value="Male"> 남성
</label>
<label>
  <input type="radio" name="gender" value="Female"> 여성
</label>

✔ name이 같으면 같은 그룹으로 작동하며
✔ label로 감싸 클릭 범위를 넓힐 수 있어 UX 향상에 좋습니다.

---

✅ STEP 2. jQuery로 체크 이벤트 처리하기

// 선택된 라디오버튼 값 가져오기
let selectedValue = $("input[name='gender']:checked").val();
console.log("선택된 성별:", selectedValue);

// 특정 값 체크 여부 확인
if ($("input[name='gender'][value='Male']").is(":checked")) {
    alert("남성이 선택됨");
}

// 체크 시 이벤트 감지
$("input[name='gender']").on("change", function () {
    alert("선택한 성별: " + $(this).val());
});

📝 팁: :checked와 .is() 조합은 라디오버튼 상태 확인에 자주 사용됩니다.

---

✅ STEP 3. ASP.NET MVC에서 선택값 처리

📌 모델 정의

public class UserModel
{
    public string Gender { get; set; }
}

📌 컨트롤러 (POST 처리)

[HttpPost]
public ActionResult Submit(UserModel model)
{
    // model.Gender 값이 "Male" 또는 "Female"로 전달됨
    return View("Result", model);
}

📌 뷰(View) 구성

@model UserModel

<form method="post" action="/Home/Submit">
    <label>
        @Html.RadioButtonFor(m => m.Gender, "Male") 남성
    </label>
    <label>
        @Html.RadioButtonFor(m => m.Gender, "Female") 여성
    </label>
    <button type="submit">제출</button>
</form>

🔁 폼 전송 후에도 선택값이 유지되며 서버와 자동으로 연동됩니다.

---

✅ 마무리하며 (결론)

라디오버튼은 단순하지만 강력한 폼 요소입니다.
ASP.NET MVC + jQuery 조합은 다음과 같은 장점이 있습니다:

• 백엔드와 자연스러운 값 연동
• 사용자 경험 향상
• 클라이언트에서 실시간 제어 가능

👉 지금 바로 여러분의 MVC 프로젝트에 적용해보세요!