Html checkbox 관련질문
본문
<body>
<script>
var wifi = {
"DESCRIPTION" : {"PLACE_NAME":"지역명","CATEGORY":"유형","INSTL_X":"설치위치(X좌표)","INSTL_Y":"설치위치(Y좌표)","PLACE_ADDR":"설치주소","GU_NM":"구명","PLACE_ADDR_SUB":"상세설치장소","OBJECTID":"콘텐츠아이디","INSTL_DIV":"설치기관(회사)"},
"DATA" : [
{"category":"복지시설","gu_nm":"강남구","instl_y":"37.479804","place_name":"아동복지센터","instl_div":"서울시","place_addr":"강남구 광평로34길 124","objectid":"WF120001","instl_x":"127.088505","place_addr_sub":"아동복지센터"},
{"category":"공공기관","gu_nm":"강남구","instl_y":"37.5082915","place_name":"u-강남 도시관제센터","instl_div":"강남구","place_addr":"서울 강남구 언주로108길 20","objectid":"WF121001","instl_x":"127.0410033","place_addr_sub":"2층"},
{"category":"공공기관","gu_nm":"강남구","instl_y":"37.4938501","place_name":"강남구의회","instl_div":"강남구","place_addr":"서울 강남구 삼성로 154","objectid":"WF121002","instl_x":"127.0642501","place_addr_sub":"6층"},
{"category":"공공기관","gu_nm":"강남구","instl_y":"37.5175201","place_name":"강남구청","instl_div":"강남구","place_addr":"서울 강남구 학동로 426","objectid":"WF121010","instl_x":"127.0474601","place_addr_sub":"본관 4층"},
{"category":"주요거리","gu_nm":"중랑구","instl_y":"37.607799","place_name":"신묵초등학교","instl_div":"서울시","place_addr":"중랑구 묵2동 247-1","objectid":"WF171274","instl_x":"127.07492","place_addr_sub":"C-MK02-0008"},
{"category":"주요거리","gu_nm":"중랑구","instl_y":"37.605064","place_name":"신내초등학교","instl_div":"서울시","place_addr":"중랑구 신내1동 445-2","objectid":"WF171275","instl_x":"127.099693","place_addr_sub":"C-SN01-0040"},
{"category":"공공기관","gu_nm":"중랑구","instl_y":"37.6064939","place_name":"중랑구청 앞","instl_div":"서울시","place_addr":"중랑구 신내동 662","objectid":"WF171276","instl_x":"127.0927651","place_addr_sub":"구청 앞 광장"},
{"category":"주민센터","gu_nm":"중랑구","instl_y":"37.600582","place_name":"마우본동주민센터","instl_div":"서울시","place_addr":"중랑구 망우동 340-18","objectid":"WF171278","instl_x":"127.1013954","place_addr_sub":"5F 로비"},
{"category":"공원","gu_nm":"중랑구","instl_y":"37.6151938","place_name":"장미테마공원","instl_div":"서울시","place_addr":"중랑구 묵2동 375","objectid":"WF171286","instl_x":"127.0730874","place_addr_sub":"광장옆 가로등"},
{"category":"공원","gu_nm":"중랑구","instl_y":"37.6148921","place_name":"장미테마공원","instl_div":"서울시","place_addr":"중랑구 묵2동 375","objectid":"WF171287","instl_x":"127.0729229","place_addr_sub":"꽃밭옆 가로등"}
]
};
document.write("wifi objects: ");
for(var k in wifi) document.write(k+", ");
document.write("Object.keys(wifi).length="+Object.keys(wifi).length+"<br>");
document.write("Object.keys(wifi.DESCRIPTION).length="+Object.keys(wifi.DESCRIPTION).length+", ");
document.write("Object.keys(wifi.DATA).length="+Object.keys(wifi.DATA).length, " 구분:<br>");
document.write("Data:<br><table border=1><tr><th>no.</th>");
for(k in wifi.DATA[0]) document.write("<th>"+k+"</th>");
document.write("</tr></table><br>");
</script>wifi objects: DESCRIPTION, DATA, Object.keys(wifi).length=2<br>Object.keys(wifi.DESCRIPTION).length=9, Object.keys(wifi.DATA).length=10 구분:<br>Data:<br><table border="1"><tbody><tr><th>no.</th><th>category</th><th>gu_nm</th><th>instl_y</th><th>place_name</th><th>instl_div</th><th>place_addr</th><th>objectid</th><th>instl_x</th><th>place_addr_sub</th></tr></tbody></table><br>
<form>
<p><h3>카테고리</h3>
<input type="checkbox" name="category" value="복지시설"> 복지시설
<input type="checkbox" name="category" value="공공기관"> 공공기관 </p>
검색 단어:<input name="key" type="text" value="문화">
필드:<input name="field" type="text" value="category">
<input onclick="search()" type="submit" value="찾기">
</form>
<script>
function search() {
var k=document.getElementsByName("key")[0].value;
var key = new RegExp(k);
var f=document.getElementsByName("field")[0].value;
document.write("Data:<br><table border=1><tr><th>no.</th>");
for(k in wifi.DATA[0])
document.write("<th>"+k+"</th>");
document.write("</tr>");
var cnt=0;
for(i in wifi.DATA) {
if(key.test(wifi.DATA[i][f])) {
cnt++;
document.write("<tr><td>"+i+"</td>");
for(k in wifi.DATA[i]) document.write("<td>"+wifi.DATA[i][k]+"</td>");
document.write("</tr>");
}
}
.
.
.
.
</script>
</body>*/
제가 원하고자 하는 것은
제출 버튼을 눌렀을 때, 체크박스에서 선택한 것만 테이블로 출력하려고 하면
어떻게 해야하는 지 입니다. 도움 좀 주세요 ㅠ
제가 만약 복지시설만 선택했을 때는 복지시설만 관련된 테이블이 나오고
둘 다 선택하면 모두 나오는 등... 그런 것이 알고싶습니다. html과 javascript가 초보라 어렵네요.
한마디로 밑줄친 체크박스에 선택된 것과 검색해서 출력된 값만 테이블에 나타나게요
답변 1
# formFile_name.php =======================================
<form name="fboardlist" id="fboardlist" action="./update.php" onsubmit="return fboardlist_submit(this);" method="post">
<?php for ($i=0; $i < 11; $i++) { ?>
<input type="checkbox" name="chk_wr_id[]" value="list_<?php echo $i; ?>" id="chk_wr_id_<?php echo $i; ?>" class="selec_chk"> 리스트<?php echo $i; ?>
<?php } ?>
<button type="submit" name="btn_submit" value="승인" onclick="document.pressed=this.value" class="btn btn-sm btn-info btn-flat pull-left">승 인</button>
</form>
<script>
function all_checked(sw) {
var f = document.fboardlist;
for (var i=0; i<f.length; i++) {
if (f.elements[i].name == "chk_wr_id[]")
f.elements[i].checked = sw;
}
}
function fboardlist_submit(f) {
var chk_count = 0;
for (var i=0; i<f.length; i++) {
if (f.elements[i].name == "chk_wr_id[]" && f.elements[i].checked)
chk_count++;
}
if (!chk_count) {
alert("리스트를 하나 이상 선택하세요.");
return false;
}
return true;
}
</script>
# update.php ============================
if ($_POST['chk_wr_id'] && count($_POST['chk_wr_id'])) {
echo "선택한 리스트갯수: ".count($_POST['chk_wr_id']);
}
print_r($_POST['chk_wr_id']);
_________________________________________________________________
위 두개의 파일(formFile_name.php, update.php)을 생성하시고
생성된 두개의 파일에 위에 작성된 각 소스를 넣고 저장하셨어 실행해보시면 도움이 될 것 같습니다.
이것을 메모장에 한페이지에 복사 하나요? 아니면 하나 하나 하나 만들어서 총 3개 만들어야 하나요?
하나하나 만들어 총 3개라는게 무슨 말씀인지요?
위 2가지 php파일을 만드셨어
서버에 올리셨어
웹브라우즈로 실행시켜보시면 아실수 있도록 만든 샘플 파일일입니다.
