Javascript Jquery多个复选框if语句_Javascript_Jquery_Html

Javascript Jquery多个复选框if语句

javascript jquery html

Javascript Jquery多个复选框if语句,javascript,jquery,html,Javascript,Jquery,Html,我有一个包含表单、jquery和javascript的html文件。单击复选框时，我希望窗体背景变大。我有3个复选框，所以当第1条被选中而第2条和第3条没有被选中时，我希望表格bg的高度为1500px 当检查1号和2号以及3号时，我希望它的高度为2000px 1号、2号和3号检查2500px 但是当检查nr.2和nr.3时，我也希望它是2000px 我创建此项是为了在全部检查时进行测试，但它不起作用： $(document).ready(function() { if (($(".ch

我有一个包含表单、jquery和javascript的html文件。单击复选框时，我希望窗体背景变大。我有3个复选框，所以

当第1条被选中而第2条和第3条没有被选中时，我希望表格bg的高度为1500px

当检查1号和2号以及3号时，我希望它的高度为2000px

1号、2号和3号检查2500px

但是当检查nr.2和nr.3时，我也希望它是2000px

我创建此项是为了在全部检查时进行测试，但它不起作用：

$(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");
    }
});

.勾选、.勾选和.勾选是复选框

我也试过&&，，，和

谢谢。

如果我没有弄错你的问题，那么我的理解是：

选中任一复选框时，则-：

高度：1500px

选中任何两个复选框时，则-：

高度：2000px

当所有三个复选框都选中时，则-：

高度：2500px

当所有复选框均未选中时则-：

高度

未定义

基于此，请参考我创建的（仅逻辑）

请查找以下代码：

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>

$(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);
  });
});

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

$(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');
  });
});

更新：根据要求

我已经修改了代码，它在每个

复选框的检查时都能很好地工作，当选中一个、两个和三个复选框时，它会增加一个特定的值，但会减少
请参阅演示
代码如下：
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>

$(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);
  });
});

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

$(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');
  });
});

加载页面时，您只执行一次测试。你不应该听复选框的点击或更改事件吗？@Shovalt是的，必须听，但是怎么听呢？因为当我点击1时，它必须是1500px点击2 1500px，点击3 1500.px。但是我怎么才能通过多次点击来实现呢？我还没有测试函数本身，我只是说，即使函数可以工作，选中复选框也不会调用它。对于要调用的函数，您需要将：$（document）.ready（function（）…更改为$（“。check_aan、.check_ver、.check_toe”）。单击（function（））{…啊，好的，那是nr 1的问题，但现在下一个哈哈…还有，我假设你实际上想要的是检查有多少复选框被选中，并据此决定宽度。谢谢。这对我帮助很大。现在我有一个问题，用这种方法也可以将表格bg计算为200？那么，当复选框1和复选框2被选中时那么bg+200px？你的意思是说，在检查多个复选框的时，应该能够将高度增加200px
。对吗？是的，如果可能的话？我想这会更容易吗？所以当你检查nr1时，高度增加200，nr2增加300或其他什么？我在t中添加了一个更新这同样很有帮助，但是当它被检查，并且在检查之后，它们不会变小吗？