Question

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

当检查nr.1且nr.2和nr.3不是时，我希望form-bg的高度为1500px，

当检查nr.1和nr.2时nr.3不是我想要它是2000px高度

和nr.1，nr.2和nr.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");
    }
});

.check_aan，.check_ver和.check_toe是复选框。

我也试过'＆amp;＆amp;' '，''和'

感谢。

Answer 1

如果我的问题正确，那么我所理解的是以下内容：

当复选框的为checked，然后 - ：height: 1500px。
当复选框的任何两个为checked，然后 - ：height: 2000px。
如果所有三个复选框都是checked，那么 - height: 2500px。
如果复选框的 none 为checked，则 - ：height未定义。

基于此，请参阅我创建的demo（仅逻辑）。

请找到以下代码：

<强> 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);
  });
});

更新：根据要求

我修改了代码，该代码适用于每个check的{{1}}，当一个 时，增加某个值>两个和三个 checkbox为checkboxes，但减少。

参阅演示here。

代码如下：

<强> HTML：

checked

<强> JS：

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

Jquery多个复选框if语句

1 个答案: