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

POPULAR ONLINE

Disable Javascript after page is loaded should be detected on action page

Rolling Average last 28 days, but return data for yesterday

$match inside $in not working in aggregate

How to adjust div's width when users zoom up it on their tablet?

Create executable Jar file under Eclipse

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

HTML

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:

HTML

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

HTML

adding facebook widget on wordpress website sidebar

Hello I have a website https://frasesstatuscom