Jquery 多个复选框 if 语句

Jquery multiple checkbox if statements

本文关键字：if 语句 复选框 Jquery      更新时间：2023-09-26

我有一个html文件，其中包含一个表单，jquery和javascript。当我单击复选框时，我希望表单背景变大。我有 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是复选框。

我也尝试了"&&"，"和"

谢谢。

如果我正确回答了您的问题，那么我所理解的内容如下：

  1. 当checked任一复选框时，则 -： height: 1500px 。
  2. 当checked任何两个复选框时，则 -： height: 2000px .
  3. 当所有三个复选框都checked时，则 -： height: 2500px .
  4. 当没有任何复选框checked则不定义 -： height。

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

请在下面找到代码：

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

更新：根据要求

我修改了代码，它在每个checkbox的check上运行良好，当checked一个、两个和三个checkboxes时，它会增加某个值，但递减。

请参阅此处的演示。

代码如下：

.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');
  });
});
相关文章：