웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > webdevetc

다수의 input checkbox 타입의 값 데이터베이스에서 저장하기, 불러오기, 출력하기

Last Modified : 2015-11-06 / Created : 2015-03-10
18,001
View Count
input 태그의 checkbox 속성을 사용한 값들이 하나가 아닌 여러개인 경우 이 값들이 서버에서 불러오게 된 뒤 자동으로 체크되게하려면 어떻게 해야하는지 알아보려 합니다.

먼저 서버에 저장 할 경우 넘겨주는 name 값을 배열로 넘겨줍니다. 아래처럼요

#1. 작성될 폼 양식



<form>
<input name="fruit[]" type="checkbox" class="fruitValue" value="사과" />사과</span>
<input name="fruit[]" type="checkbox" class="fruitValue" value="배" />배</span>
<input name="fruit[]" type="checkbox" class="fruitValue" value="바나나" />바나나</span>
</form>




#2. 폼을 넘겨받아 데이터베이스(DB)에 처리할 페이지


; PHP를 예로 들어 설명하겠습니다.

<?php
$fruit = $_REQUEST['fruit'];
// 넘겨 받은 값이 배열로 저장됨

$fruit2 = implode(',', $fruit);
// 배열로 받은 값을 텍스트로 변환하며 콤마(,)로 구분함
?>



#3. DB의 내용을 태그에 임시저장한 후 이를 스크립트로 받아 동일한 이름을 체크함



$(document).ready(function () {
check_value = $('.fruit_values').attr('data-value');
// DB내용을 data-value 속성에 임시저장한 태그

fruit_values2 = fruit_values.split(',');
// 콤마로 구분된 텍스트 값을 배열로 변환시킴

for (j=0 ; j < fruit_values2.length; j++) {
for (i=0 ; i < $('li .fruitValue').length ; i++) {
if($('li.fruitValue')[i].value == fruit_values2[j]) {
$('li.fruitValue')[i].setAttribute('checked', 'checked');
// 만약 동일한 값을 찾게될 경우 해당 체크박스(checkbox)를 체크되도록 바꿈
}
}
}
});


Previous

카페24 FTP 2.0 베타 다운로드

Previous

[구글맵] 경도, 위도 알아내는 방법, 좌표 불러오기