라디오버튼으로 다른내용
본문
구글링해서
라디오 버튼에 따라 다른 내용 보여주는 소스를 찾았는데요.
잘작동은 합니다.
근데
저는 이 라디오버튼들을 어떤것을 선택했는지를 wr_6에 저장하고자 합니다.
그럼 id등을 적절히 고쳐야 할것 같은데
구분자와 숫자가 혼용되어 스크립트랑 짬뽕되어 초보가 보기엔 헷갈려서요.
고수님들 부탁합니당.
<SCRIPT LANGUAGE="JavaScript">
<!--
function checkBox() {
var check_Box = document.getElementsByName("ckbox"); //체크박스 name
for (j = 0; j < check_Box.length; j++) {
var disign = document.getElementById([j+1]); // 보여질내용
if(check_Box[j].checked == true ){
disign.style.display = "block";
}else{
check_Box[j].checked = false;
disign.style.display = "none";
}
}
}
// -->
</script>
<!--라디오버튼-->
<label for="ckbox1">항목01</label>
<input type="radio" name="ckbox" id="ckbox1" value="" onClick="checkBox()"><br>
<label for="ckbox2">항목02 </label>
<input type="radio" name="ckbox" id="ckbox2" value="" onClick="checkBox()"><br>
<label for="ckbox3">항목03</label>
<input type="radio" name="ckbox" id="ckbox3" value=""onClick="checkBox()"><br>
<!--보여질내용-->
<div id="1">항목01번을선택하였습니다</div>
<div id="2">항목02번을선택하였습니다</div>
<div id="3">항목03번을선택하였습니다</div>
답변 4
<input type="radio" name="ckbox"
얘네 이름을 chbox가 아니라 wr_6 이렇게 수정하면 굳이 스크립트 같은 거 더 안 쓰고 지금 이대로 사용 가능하지 않을까요?
var check_Box = document.getElementsByName("wr_6"); //체크박스 name
이 부분은 wr_6 이렇게 수정을 하구요.
감사합니다. 공부하는데 많은 도움이 됩니다.^^
1) radio 의 name 을 'wr_6' 으로 변경하고,
2) value 값을 DB 에 저장되고자 하는 값으로 넣어주고,
3) document.getElementsByName("wr_6"); 으로 맞추어 주면 됩니다.
form 전송시, 처리페이지에서는 input 의 name 정보가 변수이름이 됩니다.
id 정보는 처리페이지에는 넘어가지 않습니다.
처리 페이지에서는 $_POST['wr_6'] 과 같은 형태로 선택된 값을 받아오게 됩니다. (1 or 2 or 3)
id 값은 javascript 로 처리할 때, 기타 등등 주로 사용됩니다.
<script>
function checkBox() {
var check_Box = document.getElementsByName("wr_6"); //체크박스 name
for (j = 0; j < check_Box.length; j++) {
var disign = document.getElementById(j+1); // 보여질내용
if(check_Box[j].checked == true ) {
disign.style.display = "block";
} else {
check_Box[j].checked = false;
disign.style.display = "none";
}
}
}
</script>
<!--라디오버튼-->
<label for="ckbox1">항목01</label>
<input type="radio" name="wr_6" id="ckbox1" value="1" onclick="checkBox()"><br>
<label for="ckbox2">항목02 </label>
<input type="radio" name="wr_6" id="ckbox2" value="2" onclick="checkBox()"><br>
<label for="ckbox3">항목03</label>
<input type="radio" name="wr_6" id="ckbox3" value="3" onclick="checkBox()"><br>
<!--보여질내용-->
<div id="1">항목01번을선택하였습니다</div>
<div id="2">항목02번을선택하였습니다</div>
<div id="3">항목03번을선택하였습니다</div>
상세한 설명 ^^ 감사합니다.
<label for="ckbox1">항목01</label>
<input type="radio" name="wr_6" value="1" onClick="checkBox(this)"><br>
<label for="ckbox2">항목02 </label>
<input type="radio" name="wr_6" value="2" onClick="checkBox(this)"><br>
<label for="ckbox3">항목03</label>
<input type="radio" name="wr_6" value="3" onClick="checkBox(this)"><br>
<!--보여질내용-->
<div id="1">항목01번을선택하였습니다</div>
<div id="2">항목02번을선택하였습니다</div>
<div id="3">항목03번을선택하였습니다</div>
<script>
var check_Box = document.getElementsByName("wr_6"); //체크박스 name
function show(n) {
for (var i = 1; i <= check_Box.length; i++)
document.getElementById([i]).style.display = i == n ? 'block' : 'none';
}
function checkBox(obj) { show(obj.value) }
show(<?php echo $wr_6?>);
</script>
감사합니다.
오 깔끔하십니다. 감사합니다. ^^
