checkbox 전체 선택/해제 및 POST로 value 전달

 

잘못된 방법

아래 코드를 실행해 보면 _ 체크박스를 얼마나 체크하던, 마지막 값만 출력된다(GET, POST 차이 없음).

<form id="frm" method="POST">
	<input type="checkbox" name="brand" id="brand1" value="1"><label for="brand1">1</label>
	<input type="checkbox" name="brand" id="brand2" value="2"><label for="brand2">2</label>
	<input type="checkbox" name="brand" id="brand3" value="3"><label for="brand3">3</label>
	<button type="submit">ok</button>
</form>
<?
echo $_REQUEST['brand'];
?>

결과

2

 

배열로 넘기기

체크된 값들을 모두 받으려면, 엘리먼트 네임을 배열로 변경해야 한다.

<form id="frm" method="POST">
    <input type="checkbox" name="brand[]" id="brand1" value="1"><label for="brand1">1</label>
    <input type="checkbox" name="brand[]" id="brand2" value="2"><label for="brand2">2</label>
    <input type="checkbox" name="brand[]" id="brand3" value="3"><label for="brand3">3</label>
    <button type="submit">ok</button>
</form>
<?
echo $_REQUEST['brand'];
echo '<br>';
echo var_dump($_REQUEST['brand']);
?>

결과

Array
array(2) { [0]=> string(1) "1" [1]=> string(1) "2" }

 

하나의 문자열로 넘기기

javascript 로 처리하여 하나의 문자열로 받을 수도 있고, 변수명을 다르게 넘길 수도 있다.

<form id="frm" method="GET">
    <input type="checkbox" name="brand" id="brand1" value="1"><label for="brand1">1</label>
    <input type="checkbox" name="brand" id="brand2" value="2"><label for="brand2">2</label>
    <input type="checkbox" name="brand" id="brand3" value="3"><label for="brand3">3</label>
    <button type="submit">ok</button>
</form>
<?
echo $_REQUEST['brands'];
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {

    $("#frm").on("submit", function () {

        let arr = [];

        $("input[name=brand]:checked").each(function() {
            arr.push( $(this).val() );
        });

        $(this).append('<input type="hidden" name="brands" value="' + arr + '">');

    })
    
})
</script>

결과

1,2

 

checkbox 전체 체크

엘리먼트 네임이 brand 인 checkbox 모두 체크.

$("#checkAll").on("click", function() {
    if ($("#checkAll").is(":checked")){
        $("input[name=brand]").prop("checked", true);
    } else {
        $("input[name=brand]").prop("checked", false);
    }
});