Checkboxes: How can I check two sets at the same time?

158
December 29, 2017, at 06:27 AM

I have 2 sets of checkboxes in my webpage, and I have a small script that is checking the boxes and not the others when I click one, which is what I want.

Unfortunately, it only checks one set of boxes, and leaves the other set unchecked.

Although on reloading my page both sets are checked, this is due to my post variable. I will show you the code.

Can anybody see where I could update it to check both boxes when clicking one box?

<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

Thanks guys, i should of thought about it before posting really, i chose the simple method . Very wet, But still did the job... Thanks for your help guys.

<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>       
/
Rent Charter Buses Company
READ ALSO
How can I use a class from vendor folder in laravel project

How can I use a class from vendor folder in laravel project

I am trying to include guzzle http client from a vendor folder and using composerHere is what I have tried so far

306
Text transformation uppercase doesn&#39;t show properly

Text transformation uppercase doesn't show properly

I've a little struggle with a this very basic bug, but there's the situation, by force I need to use the uppercase for all the text without exceptions, because is the way what they want to show, so we have a text like this:

12
HTML/CSS: How to Prevent Single Word Orphans Near Floated Elements?

HTML/CSS: How to Prevent Single Word Orphans Near Floated Elements?

When I have enough screen width, text wraps nicely around a right floated image (see first example below)But when the viewport narrows, I can find a single word the the left of the image, with the rest of the text below it, especially if one of the first few words is longer...

44
adding facebook widget on wordpress website sidebar

adding facebook widget on wordpress website sidebar

Hello I have a website https://frasesstatuscom

39