jQuery：选中复选框，条件设置

Question

我正在尝试根据两个复选框的状态设置一些显示和隐藏元素的条件：

• 如果选中复选框A，则显示类为.one 的元素。 隐藏类 .two 的元素。
• 如果选中复选框B，则显示具有.two 类的元素。 隐藏类 .one 的元素。
• 如果两者都被选中，则显示这两个元素。
• 如果都没有选中，则隐藏这两个元素。

我的代码如下。除了它们的值之外，复选框是相同的。 我在检查两个复选框的逻辑上有问题。

HTML：

<form action="">
  <div class="inputfield">
    <label for="">A</label>
    <input type="checkbox" name="xyz" value="A" />
    <label for="">B</label>
    <input type="checkbox" name="xyz" value="B" />
  </div>
</form>

<div class="one">Results for A</div>
<div class="one">Results for A</div>
<div class="two">Results for B</div>

Js：

var a = $(".one");
var b = $(".two");
a.hide();
b.hide();

$(".inputfield input[name='xyz']").change(function() {
  var value = $(this).val();
  if (this.checked) {
    //console.log(value);
    if (value == 'A') {
      a.show();
      b.hide();
    }
    if (value == 'B') {
      a.hide();
      b.show();
    }
    if (value == 'A' && value == 'B') {
      a.show();
      b.show();
    }
  } else {
    a.hide();
    b.hide();
  }
});

JsFiddle here.

Answer 1

1. 您不应该有两个具有相同名称的复选框，但至少必须为它们提供不同的 ID。
2. 最好检查checkbox是否使用is(':checked')检查
3. 关于登录 - 检查示例：

var a = $(".one");
var b = $(".two");
a.hide();
b.hide();

$(".inputfield input[name='xyz']").change(function() {
  var A_is_checked = $(".inputfield input[name='xyz']:first").is(':checked');
  var B_is_checked = $(".inputfield input[name='xyz']:last").is(':checked');
  
  if (A_is_checked && B_is_checked) {
      a.show();
      b.show();
  } else if (A_is_checked) {
      a.show();
      b.hide();
  } else if (B_is_checked) {
      a.hide();
      b.show();
  } else {
    a.hide();
    b.hide();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
  <div class="inputfield">
    <label for="">A</label>
    <input type="checkbox" name="xyz" value="A" id="A" />
    <label for="">B</label>
    <input type="checkbox" name="xyz" value="B" id="B" />
  </div>
</form>

<div class="one">Results for A</div>
<div class="one">Results for A</div>
<div class="two">Results for B</div>

如果您无法更改标记，则可以通过其值选择相关复选框，使用：

var A_is_checked = $("input[name='xyz'][value='A']").is(':checked');
var B_is_checked = $("input[name='xyz'][value='B']").is(':checked');

或者通过 DOM 中的位置：

var A_is_checked = $("input[name='xyz']:first").is(':checked');
var B_is_checked = $("input[name='xyz']:last").is(':checked');

Answer 2

您可以改用toggle() 和is(':checked')。您可以使用属性选择器按值属性选择每个输入，然后切换one 和two div 的

var a = $(".one");
var b = $(".two");
a.hide();
b.hide();

$(".inputfield input[name='xyz']").change(function() {
  a.toggle($('input[value="A"]').is(':checked'))
  b.toggle($('input[value="B"]').is(':checked'))
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
  <div class="inputfield">
    <label for="">A</label>
    <input type="checkbox" name="xyz" value="A" />
    <label for="">B</label>
    <input type="checkbox" name="xyz" value="B" />
  </div>
</form>

<div class="one">Results for A</div>
<div class="one">Results for A</div>
<div class="two">Results for B</div>