Question

我的网页上有两组复选框，当我点击一个时，我有一个小脚本正在检查框而不是其他框，这就是我想要的。

不幸的是，它只检查一组方框，而另一组则未经检查。

虽然在重新加载我的页面时会检查两个集合，但这是由于我的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>       
/

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

1 个答案: