체크박스 관련 좀 도와주세요 ㅠㅠ
본문
<script language="javascript">
function eventCheck(obj, group) {
var step2_1 = document.getElementById("step2_1");
step2_1.style.display = document.frmdetailsearch.step1_1.checked == false?"none":"block";
var step2_2 = document.getElementById("step2_2");
step2_2.style.display = document.frmdetailsearch.step1_2.checked == false?"none":"block";
var oBool = obj.checked; //선택한 체크박스 checked 값을 변수에 담는다.
var oDiv = document.getElementById(group); //해당 그룹 div
var oNodeList = oDiv.getElementsByTagName("INPUT"); //div 안에 속해 있는 개체
/* 해당 그룹에 있는 체크박스 모두 해제 */
for (i = 0; i < oNodeList.length; i++)
{
if (oNodeList[i].type == "checkbox")
{
oNodeList[i].checked = false;
}
}
/* 선택한 체크박스에 checked 적용 */
obj.checked = oBool;
}
</script>
<form name="frmdetailsearch" role="form" method="get" action="/shop/search.php" onsubmit="return fsearchbox_submit(this);">
<input type="hidden" name="qsort" id="qsort" value="<?php echo $qsort ?>">
<input type="hidden" name="qorder" id="qorder" value="<?php echo $qorder ?>">
<input type="hidden" name="qcaid" id="qcaid" value="<?php echo $qcaid ?>">
<div>
<div id="group1">
<label style="display:block;"><b>제품 종류</b><br></label>
<input type="checkbox" id="step1_1" name="it_1[]" value="1" onclick="eventCheck(this,'group1')" <?php echo in_array("1",$it_1)?'checked="checked"':'';?>> 무반사 화이트보드<br>
<input type="checkbox" id="step1_2" name="it_1[]" value="2" onclick="eventCheck(this,'group1')" <?php echo in_array("2",$it_1)?'checked="checked"':'';?>> 두배로 화이트보드<br>
</div>
<div id="step2_1" style="display:none;">
<label style="display:block;"><b>선택 옵션1</b><br></label>
<input type="checkbox" name="it_2" value="yes" <?php echo $it_2_check?'checked="checked"':'';?>> 자석 기능<br>
<input type="checkbox" name="it_3" value="yes" <?php echo $it_3_check?'checked="checked"':'';?>> 이동식 스탠드<br>
<input type="checkbox" name="it_4" value="yes" <?php echo $it_4_check?'checked="checked"':'';?>> 맞춤시공
</div>
<div id="step2_2" style="display:none;">
<label style="display:block;"><b>선택 옵션2</b><br></label>
<input type="checkbox" name="it_2" value="yes" <?php echo $it_2_check?'checked="checked"':'';?>> 자석 기능<br>
<input type="checkbox" name="it_3" value="yes" <?php echo $it_3_check?'checked="checked"':'';?>> 이동식 스탠드<br>
<input type="checkbox" name="it_4" value="yes" <?php echo $it_4_check?'checked="checked"':'';?>> 맞춤시공
</div>
<div class="si">
<div>
<button type="submit">검색하기</button>
</div>
</div>
</div>
</form>
어찌어찌해서 여기저기 찾아봐서 체크를 그룹 중 하나만 되게 하는거랑 체크를 했을 때 특정 id가 사라졌다 나오게 하는걸 혼합했는데요.
문제는 A를 클릭하고 해제하는건 잘 작동이 되는데 A를 클릭했다가 B를 클릭하면 A의 내용이 사라지지 않고 A내용과 B내용이 동시에 나오네요 ㅠㅠ
어떻게 하면 하나만 나오게 할 수 있을까요?
답변 2
<script language="javascript">
function eventCheck(obj, group) {
var flagNum = 0;
var oDiv = document.getElementById(group); //해당 그룹 div
var oNodeList = oDiv.getElementsByTagName("INPUT"); //div 안에 속해 있는 개체
/* 해당 그룹에 있는 체크박스 모두 해제 */
for (i = 0; i < oNodeList.length; i++)
{
if (oNodeList[i].type == "checkbox")
{
if(oNodeList[i].getAttribute('id') == obj.getAttribute('id')){
oNodeList[i].checked = true;
flagNum = i;
}else{
oNodeList[i].checked = false;
}
}
}
document.getElementById('step2_1').style.display = 'none';
document.getElementById('step2_2').style.display = 'none';
if(flagNum == 0){
document.getElementById('step2_1').style.display = 'block';
}else if(flagNum == 1){
document.getElementById('step2_2').style.display = 'block';
}
}
</script>
잘 해결되시길 바랍니다.
근데 궁금한게 jquery를 사용하면 겁나 쉬울텐데, 순수 자바스크립트로 해야하는 이유가 있나요? ㅎㅎ
답변 남겨주셔서 너무 감사합니다 ㅠㅠ
일단 스크립트 부분을 통째로 치환했는데 작동이 되지 않네요 뭔가 따로 해야 하는게 있나요?
그리고 제이쿼리를 사용안하는 이유는.. 제가 몰라서 ㅠㅠ 스크립트도 모르는데 어찌어찌 검색해서 짜집기 하는거에요 ㅋㅋㅋ ㅠㅠ
제가 한걸로 안되나요?
안되면 URL주소를 알려주세요 봐드릴게요.
아~ 주신거는 그냥 제가 위에 질문에 올린거에 script 부분만 갈아서 사용했어요 고대로
답변을 작성하시기 전에 로그인 해주세요.
