SW/HTML

HTML : 체크박스 값을 항상 $_POST 값으로 받기 : 예제, 구현

얇은생각 2020. 7. 31. 07:30
반응형

HTML : 체크박스 값을 항상 $_POST 값으로 받기 : 예제, 구현

 

체크박스의 문제는 선택하지 않으면 form과 함께 post되지 않는다는 것입니다. 체크박스를 선택하고 form을 게시하면 $ _POST 변수에 체크박스의 값이 표시되며, 이 확인란을 선택 취소하면 $ _POST 변수에 값이 추가되지 않습니다.

PHP에서는 일반적으로 체크박스 요소에서 isset () 검사를 수행하여 이 문제를 해결할 수 있습니다. 예상한 요소가 $ _POST 변수에 설정되어 있지 않으면 확인란이 선택되어 있지 않으며 값이 false 일 수 있습니다.

 

if(!isset($_POST['checkbox1']))
{
     $checkboxValue = false;
} else {
     $checkboxValue = $_POST['checkbox1'];
}

 

그러나 동적 양식을 만든 경우 체크박스의 이름 속성을 항상 알 수는 없으며 체크박스의 이름을 모르면 isset 함수를 사용하여 전송 여부를 확인할 수 없습니다. $ _POST 변수 이 문제를 해결하려면 체크박스의 실제 값을 저장하는 새로운 숨겨진 요소를 사용할 수 있습니다.

숨겨진 요소를 만들고 Javascript를 사용하여 숨겨진 필드의 값을 확인란의 실제 값으로 변경하면 됩니다. 체크박스의의 값을 설정하지 않으면 체크박스가 선택되어 있고 form이 제출 될 때 값이 그대로 제공됩니다. 체크박스에서 value 속성을 설정하여이를 변경할 수 있습니다. 

 

<input type="checkbox" name="checkbox1" value="1" />

 

그러나 확인되지 않은 값이 없기 때문에, 이 체크박스가 선택되어 있는지 알 수 없습니다. 숨겨진 요소가 유용한 곳입니다.

 

<input type="checkbox" name="checkbox1_checkbox" id="checkbox1_checkbox" />
<input type="hidden" name="checkbox1" value="0" />

 

이러한 요소를 제출하면 항상 숨겨진 요소 인 checkbox1이 표시되지만 확인란이 선택되어 있는지 여부에 따라 checkbox1_checked 요소가 표시되거나 표시되지 않을 수 있습니다. 이제 우리가 가지고있는 문제는 체크 박스를 클릭하면 숨겨진 필드에서 값을 변경하는 방법을 찾아야한다는 것입니다.이 방법은 다음 Javascript로 수행 할 수 있습니다.

 

$('input[type="checkbox"]').on('change', function(e){
        if($(this).prop('checked'))
        {
            $(this).next().val(1);
        } else {
            $(this).next().val(0);
        }
});

 

이 자바 스크립트는 모든 체크박스에 적용됩니다. 각 체크박스의 클릭 이벤트에서 체크박스가 현재 선택되어 있는지 확인합니다. 이것이 체크되면 다음 요소 (숨겨진 필드 여야 함)를 가져 와서 값을 체크한 값으로 변경합니다. 체크박스가 선택되어 있지 않으면 숨겨진 필드가 표시되고 값이 선택되지 않은 상태로 변경됩니다.

이제 form을 post하면 체크박스를 선택하지 않아도 항상 실제 확인 값을 얻게됩니다. 이를 통해 체크박스를 사용하여 동적 form을 작성하고 해당 체크박스가 선택 또는 선택 해제되었는지 알 수 있습니다.

위의 예제에서 숨겨진 필드를 확인란 뒤에 놓고 Javascript를 사용하여 숨겨진 필드의 값을 변경했습니다. 그러나 체크박스 앞에 숨겨진 값을 배치하고 체크박스 필드와 동일한 이름을 지정한 경우 체크박스를 선택하지 않으면 이 값이 전송됩니다.

 

<input type="hidden" name="checkbox1" value="0" />
<input type="checkbox" name="checkbox1" id="checkbox1" value="1" />

 

위의 코드를 사용하여 체크박스의 선택을 취소하면 $ _POST 변수에 값이 전송되지 않지만 같은 이름의 숨겨진 필드가 있으므로 이 필드는 0 값으로 나타납니다. 체크박스가 선택된 경우 1의 값은 $ _POST 변수에 들어갑니다.

반응형