[jQuery] radio, checkbox 체크 값 가져오기, 확인하기, 선택하기

아래 소스코드는 라디오 버튼과 체크박스를 조작하며 값을 확인하고, 선택 확인 버튼을 통해 체크된 값에 대해서 확인하는 코드입니다.

 

 

소스코드

 

1. 라디오 버튼 및 체크 박스 이벤트 처리

updateGenderResult(), updateFlavorResult() 함수를 통해서 변경 이벤트를 처리하고 선택된 값에 대해서 화면에 노출합니다.

2. 버튼 이벤트

버튼을 통해서 라디오 버튼과 체크박스를 선택하는 기능입니다. 각각의 버튼을 통해서 선택된 값을 확인할 수 있습니다.

3. 선택 확인 버튼

checkSelection() 함수를 호출하여 현재 선택된 라디오 버튼과 체크박스 값을 확인한 후 결과를 표시하고 있습니다.

 

 

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  // 라디오 버튼 클릭 이벤트 처리
  $('input[type=radio]').change(function() {
    updateGenderResult();
  });

  // 체크 박스 클릭 이벤트 처리
  $('input[type=checkbox]').change(function() {
    updateFlavorResult();
  });

  // 남자 라디오 버튼 선택 버튼 이벤트 처리
  $('#selectMaleButton').click(function() {
    $('input[name=gender][value=male]').prop('checked', true);
    updateGenderResult();
  });

  // 여자 라디오 버튼 선택 버튼 이벤트 처리
  $('#selectFemaleButton').click(function() {
    $('input[name=gender][value=female]').prop('checked', true);
    updateGenderResult();
  });

  // 초콜릿 체크 박스 선택 버튼 이벤트 처리
  $('#selectChocolateButton').click(function() {
    $('#chocolate').prop('checked', true);
    updateFlavorResult();
  });

  // 바닐라 체크 박스 선택 버튼 이벤트 처리
  $('#selectVanillaButton').click(function() {
    $('#vanilla').prop('checked', true);
    updateFlavorResult();
  });

  // 체크 확인 버튼 이벤트 처리
  $('#checkSelectionButton').click(function() {
    checkSelection();
  });

  function updateGenderResult() {
    var selectedValue = $('input[name=gender]:checked').val();
    $('#genderResult').text('선택된 성별: ' + selectedValue);
  }

  function updateFlavorResult() {
    var selectedFlavors = [];
    $('input[type=checkbox]:checked').each(function() {
      selectedFlavors.push($(this).val());
    });

    if (selectedFlavors.length > 0) {
      $('#flavorResult').text('선택된 맛: ' + selectedFlavors.join(', '));
    } else {
      $('#flavorResult').text('');
    }
  }
  function checkSelection() {
    var selectedGender = $('input[name=gender]:checked').val();
    var selectedFlavors = $('input[type=checkbox]:checked').map(function() {
      return $(this).val();
    }).get();

    var genderMessage = selectedGender !== undefined ? "선택된 성별: " + selectedGender : "선택된 성별: 없음";
    var flavorsMessage = selectedFlavors.length > 0 ? "선택된 맛: " + selectedFlavors.join(', ') : "선택된 맛: 없음";
    
    var message = genderMessage + "\n" + flavorsMessage;
    alert(message);
  }
});
</script>
<button id="checkSelectionButton">선택 확인</button>
<h3>라디오</h3>
<p>
<button id="selectMaleButton">남자 선택</button>
<button id="selectFemaleButton">여자 선택</button>
</p>
<p>
<input type="radio" name="gender" value="male"> 남자
<input type="radio" name="gender" value="female"> 여자
</p>
<div id="genderResult"></div>


<h3>체크 박스</h3>
<p>
<button id="selectChocolateButton">초콜릿 선택</button>
<button id="selectVanillaButton">바닐라 선택</button>
</p>
<p>
<input type="checkbox" id="chocolate" value="chocolate"> 초콜릿
<input type="checkbox" id="vanilla" value="vanilla"> 바닐라
</p>
<div id="flavorResult"></div>

 

 

소스코드 화면

 

 

radio, checkbox 선택 결과

 

 

선택 확인 버튼 결과