체크 상자 : 두 세트를 동시에 확인하려면 어떻게해야합니까?

Question

나는 내 웹 페이지에 2 세트의 체크 박스를 가지고 있는데, 내가 원하는 것을 클릭하면 상자를 체크하는 작은 스크립트가있다.

불행히도 한 세트의 상자 만 검사하고 다른 세트는 선택하지 않습니다.

내 페이지를 다시로드 할 때 두 세트가 모두 선택되어 있지만 이것은 내 post 변수 때문입니다. 코드를 보여 드리겠습니다.

아무도 내가 상자 하나를 클릭하면 두 상자를 모두 확인하도록 업데이트 할 수 있습니까?

<div id='checkbox-container'> 
    <input type="checkbox" id="small" name="displaytypethumbs" value="minlist" <?php if (!empty($_POST['displaytypethumbs'])): ?> checked="checked"<?php endif; ?> onclick="chbx(this)"> 
    <label for="small" class="smalllistings">Thumbs</label> 
    </input> 

    <input type="checkbox" id="large" name="displaytypegallery" value="maxlist" <?php if (!empty($_POST['displaytypegallery'])): ?> checked="checked"<?php endif; ?> onclick="chbx(this)"> 
    <label for="large" class="largelistings" >Gallery</label> 
    </input> 

    <input type="checkbox" id="fulllistings" name="displaytypefull" value="fulllist" <?php if (!empty($_POST['displaytypefull'])): ?> checked="checked"<?php endif; ?>onclick="chbx(this)"> 
    <label for="fulllistings" class="fulllistings" >Full Listing</label>  
    </input> 
</div> 
<div id='checkbox-container2'> 
    <input type="checkbox" id="small2" name="displaytypethumbs" value="minlist" class="smalllistingsbox" 
    <?php if (!empty($_POST['displaytypethumbs'])): ?> checked="checked"<?php endif; ?> onclick="chbx(this)"> 
    <label for="small2" class="smalllistingsmain" >Thumbs</label> 
    </input> 

    <input type="checkbox" id="large2" name="displaytypegallery" value="maxlist" class="largelistingsbox" 
    <?php if (!empty($_POST['displaytypegallery'])): ?> checked="checked"<?php endif; ?> onclick="chbx(this)"> 
    <label for="large2" class="largelistingsmain" >Gallery</label> 
    </input> 

    <input type="checkbox" id="fulllistings2" name="displaytypefull" value="fulllist" 
    <?php if (!empty($_POST['displaytypefull'])): ?> checked="checked"<?php endif; ?> onclick="chbx(this)"> 
    <label for="fulllistings2" class="fulllistingsmain" >Full Listings</label> 
    </input> 
    </div> 
</form> 
<script> 
function chbx(obj) { 
    var that = obj; 
    if(document.getElementById(that.id).checked == true) { 
    document.getElementById('small').checked = false; 
    document.getElementById('large').checked = false; 
    document.getElementById('fulllistings').checked = false; 
    document.getElementById('small2').checked = false; 
    document.getElementById('large2').checked = false; 
    document.getElementById('fulllistings2').checked = false;  
    document.getElementById(that.id).checked = true; 
    } 
} 
</script> 

Answer 1

감사합니다. 정말로 게시하기 전에 생각해야합니다. 간단한 방법을 선택했습니다. 아주 젖었 어.하지만 여전히 일을 했어. 네 도움을 주셔서 감사합니다.

<div id='checkbox-container'> 

    <input type="checkbox" id="small" name="displaytypethumbs" value="minlist" <?php if (!empty($_POST['displaytypethumbs'])): ?> checked="checked"<?php endif; ?> onclick="chbx(this); check1();"> 
    <label for="small" class="smalllistings">Thumbs</label> 
    </input> 

    <input type="checkbox" id="large" name="displaytypegallery" value="maxlist" <?php if (!empty($_POST['displaytypegallery'])): ?> checked="checked"<?php endif; ?> onclick="chbx(this); check2();"> 
    <label for="large" class="largelistings" >Gallery</label> 
    </input> 

    <input type="checkbox" id="fulllistings" name="displaytypefull" value="fulllist" <?php if (!empty($_POST['displaytypefull'])): ?> checked="checked"<?php endif; ?>onclick="chbx(this); check3();"> 
    <label for="fulllistings" class="fulllistings" >Full Listing</label>  
    </input> 

</div> 

<div id='checkbox-container'> 

<input type="checkbox" id="small2" name="displaytypethumbs" value="minlist" class="smalllistingsbox" 
<?php if (!empty($_POST['displaytypethumbs'])): ?> checked="checked"<?php endif; ?> onclick="chbx(this); check4();"> 
<label for="small2" class="smalllistingsmain" >Thumbs</label> 
</input> 


<input type="checkbox" id="large2" name="displaytypegallery" value="maxlist" class="largelistingsbox" 
<?php if (!empty($_POST['displaytypegallery'])): ?> checked="checked"<?php endif; ?> onclick="chbx(this); check5();"> 
<label for="large2" class="largelistingsmain" >Gallery</label> 
</input> 


<input type="checkbox" id="fulllistings2" name="displaytypefull" value="fulllist" 
<?php if (!empty($_POST['displaytypefull'])): ?> checked="checked"<?php endif; ?> onclick="chbx(this); check6();"> 
<label for="fulllistings2" class="fulllistingsmain" >Full Listings</label> 
</input> 


</div> 

</form> 



<script> 
function chbx(obj) 
{ 
var that = obj; 
if(document.getElementById(that.id).checked == true) { 

document.getElementById('small').checked = false; 
document.getElementById('large').checked = false; 
document.getElementById('fulllistings').checked = false; 


document.getElementById('small2').checked = false; 
document.getElementById('large2').checked = false; 
document.getElementById('fulllistings2').checked = false;  

document.getElementById(that.id).checked = true; 
} 
} 

function check1(){document.getElementById('small2').checked = true; } 
function check2(){document.getElementById('large2').checked = true; } 
function check3(){document.getElementById('fulllistings2').checked = true; } 


function check4(){document.getElementById('small').checked = true; } 
function check5(){document.getElementById('large').checked = true; } 
function check6(){document.getElementById('fulllistings').checked = true; } 


</script>  
/