php와 자바스크립트를 이용해서 checkbox 여러개를 체크하고 해제하고 하는 것을 배열에 저장해서 서버에 저장하는 코드

이런형태의 자료를 만들경우가 많을 것 같은데, 참고하려고 작성해 봅니다.

<form method="POST" action="save_checkbox.php">
  <label><input type="checkbox" name="checkbox[]" value="apple"> Apple</label>
  <label><input type="checkbox" name="checkbox[]" value="banana"> Banana</label>
  <label><input type="checkbox" name="checkbox[]" value="orange"> Orange</label>
  <button type="submit">Save</button>
</form>

일단  php? html.. 뭐 같죠? ㅎㅎ

폼을 만들고

name이란 속성을 이용해서

const checkboxes = document.querySelectorAll('input[name="checkbox[]"]');
const checkboxArray = Array.from(checkboxes);

checkboxArray.forEach((checkbox) => {
  checkbox.addEventListener('change', () => {
    const checkedValues = checkboxArray.filter(c => c.checked).map(c => c.value);
    console.log(checkedValues); // 선택된 체크박스 값 출력
  });
});

위의 코드에서는 querySelectorAll 메서드를 사용하여 이름이 checkbox[]인 모든 체크박스를 가져옵니다. Array.from 메서드를 사용하여 HTMLCollection을 배열로 변환합니다.

그런 다음 배열 메서드 forEach를 사용하여 모든 체크박스에 대한 change 이벤트를 수신하고, 체크된 값들을 filter와 map 메서드를 사용하여 선택된 값의 배열로 변환합니다.

 

PHP코드

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  $checkboxValues = $_POST['checkbox'];
  print_r($checkboxValues); // 선택된 체크박스 값 출력
}
?>

 

PHP 코드에서는 $_POST 배열을 사용하여 선택된 checkbox 값을 가져옵니다. 위의 예제에서는 print_r 함수를 사용하여 선택된 값들을 출력합니다.

위의 모든 코드를 합쳐서 사용하면 다음과 같은 결과를 얻을 수 있습니다.

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  $checkboxValues = $_POST['checkbox'];
  print_r($checkboxValues); // 선택된 체크박스 값 출력
  // 여기서 서버에 값을 저장하십시오.
}
?>
<form method="POST" action="save_checkbox.php">
  <label><input type="checkbox" name="checkbox[]" value="apple"> Apple</label>
  <label><input type="checkbox" name="checkbox[]" value="banana"> Banana</label>
  <label><input type="checkbox" name="checkbox[]" value="orange"> Orange</label>
  <button type="submit">Save</button>
</form>
<script>
const checkboxes = document.querySelectorAll('input[name="checkbox[]"]');
const checkboxArray = Array.from(checkboxes);

checkboxArray.forEach((checkbox) => {
  checkbox.addEventListener('change', () => {
    const checkedValues = checkboxArray.filter(c => c.checked).map(c => c.value);
    console.log(checkedValues); // 선택된 체크박스 값 출력
  });
});
</script>