체크박스 관련 좀 도와주세요 ㅠㅠ
본문
<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주소를 알려주세요 봐드릴게요.
답변을 작성하시기 전에 로그인 해주세요.