复选框：如何同时检查两组？

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>       
/