Jquery multiple checkbox if statements

Question

I have a html file which contains a form, jquery and javascript. When i click a checkbox i want the form-background go larger. I have 3 checkboxes, so

when nr.1 is checked and nr.2 and nr.3 not, i want the form-bg to be 1500px height,

when nr.1 and nr.2 are checked and nr.3 not i want it to be 2000px height

and nr.1, nr.2 and nr.3 checked 2500px;

BUT when nr.2 and nr.3 are checked and i also want it to be 2000px.

I created this for testing when they are all checked, but it wont work:

$(document).ready(function() {
    if (($(".check_aan").is(':checked')) || ($(".check_ver").is(':checked')) || ($(".check_toe").is(':checked'))) {
        $(".form-bg").css("height", "2500px");
    } else {
        $(".form-bg").css("height", "4000px");
    }
});

.check_aan, .check_ver and .check_toe are the checkboxes.

I also tried '&&' ',' 'and'

Thanks.

You are performing the test only once when the page is loaded. Shouldn't you listen to the click or change events of the checkboxes? — Shovalt
– Shovalt, Commented Apr 26, 2016 at 8:47
@Shovalt yes it has to be, but how? Cause when i click 1 it has to be 1500px click 2 1500px, click 3 1500.px. But how do i have to do it with multiple clicks? — j. Cup
– j. Cup, Commented Apr 26, 2016 at 8:50
I haven't tested the function itself, I'm just saying that even if the function works, checking a checkbox won't call it. For the function to be called you need to change: $(document).ready(function()... to $(".check_aan,.check_ver,.check_toe").click(function() {... — Shovalt
– Shovalt, Commented Apr 26, 2016 at 8:52
Also, I assume that what you actually want is to check how many checkboxes are checked, and decide the width accordingly. — Shovalt
– Shovalt, Commented Apr 26, 2016 at 8:57

Shashank · Accepted Answer · 2016-04-26 11:42:11Z

1

If I got your question correctly, then what I have understood is the following:

When either of the checkboxes is checked then -: height: 1500px.
When any two of the checkboxes are checked then -: height: 2000px.
When all the three checkboxes are checked then -: height: 2500px.
When none of the checkboxes is checked then -: height is not defined.

Based on this, refer to the demo (only the logic) that I have created.

Please find the code below:

HTML:

<div>
  <label>
    <input type="checkbox" class="check1" /> Checkbox 1
  </label>
  <label>
    <input type="checkbox" class="check2" /> Checkbox 2
  </label>
  <label>
    <input type="checkbox" class="check3" /> Checkbox 3
  </label>
</div>
<p>

</p>

JS:

$(function() {
  $('input[type="checkbox"]').on('change', function() {
    var isCheck1Checked = $('.check1').prop('checked');
    var isCheck2Checked = $('.check2').prop('checked');
    var isCheck3Checked = $('.check3').prop('checked');
    var text;
    if (!isCheck1Checked && !isCheck2Checked && !isCheck3Checked) {
      text = '';
    } else if (isCheck1Checked && isCheck2Checked && isCheck3Checked) {
      text = "The height is 2500px";
    } else if ((isCheck1Checked && isCheck2Checked) || (isCheck2Checked && isCheck3Checked) || (isCheck1Checked && isCheck3Checked) && !(isCheck1Checked && isCheck2Checked && isCheck3Checked)) {
      text = "The height is 2000px";
    } else {
      text = "The height is 1500px";
    }
    $('p').text(text);
  });
});

Update : As per request

I have modified the code, which works well on check of every checkbox, it increments a certain value when one, two and three checkboxes are checked, but the decrement.

Refer the demo here.

Code is as follows:

HTML:

<div>
  <label>
    <input type="checkbox" class="check1" /> Checkbox 1
  </label>
  <label>
    <input type="checkbox" class="check2" /> Checkbox 2
  </label>
  <label>
    <input type="checkbox" class="check3" /> Checkbox 3
  </label>
</div>

<br />
<div class="target"></div>

JS:

$(function() {
  $('input[type="checkbox"]').on('change', function() {
    var isCheck1Checked = $('.check1').prop('checked');
    var isCheck2Checked = $('.check2').prop('checked');
    var isCheck3Checked = $('.check3').prop('checked');
    var text, c = 0;
    if (!isCheck1Checked && !isCheck2Checked && !isCheck3Checked) {
      text = '';
    } else if (isCheck1Checked && isCheck2Checked && isCheck3Checked) {
      text = "The height is 2500px";
      c = 300;
    } else if ((isCheck1Checked && isCheck2Checked) || (isCheck2Checked && isCheck3Checked) || (isCheck1Checked && isCheck3Checked) && !(    isCheck1Checked && isCheck2Checked && isCheck3Checked)) {
      text = "The height is 2000px";
      c = 200;
    } else {
      text = "The height is 1500px";
      c = 50;
    }

    var oldHeight = parseInt($('.target').css('height'));
    $('.target').css('height', oldHeight + c + 'px');
  });
});

edited Apr 26, 2016 at 11:42

answered Apr 26, 2016 at 10:13

Shashank

2,1002 gold badges21 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

j. Cup Over a year ago

thanks. This helps me a lot. now i have an other question, it it with this way also possible to count the form-bg up with 200? So, when check 1 and check 2 is checked then bg + 200 px?

Shashank Over a year ago

u mean to say that one should be able to increment the height by 200px on check of more than one checkbox. Right?

j. Cup Over a year ago

yeah, if that is possible? that would me more easy i think? so when you check nr1 increment the height by 200 and nr2 by 300 or something?

Shashank Over a year ago

I have added an update in the post, please refer to it.

j. Cup Over a year ago

thats again helps alot, but when it is checked, and after that unchecked, they don't get smaller?

|

Collectives™ on Stack Overflow

Jquery multiple checkbox if statements

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related