javascript - 当选中某个值的复选框时如何显示元素？

Question

有三个复选框，我想在选中“值 C”时在表单下方显示“文本”。当仅选中复选框“值 C”时，它似乎可以工作。但是当我选中多个复选框时，例如“值 A”和“值 C”，“文本”未出现。

我想在选中“值 C”时显示“文本”。

注意:我无法更改 HTML 代码，因为它是由 WordPress 插件创建的。

$(function() {
  var $input = $('input[name="name123[data][]"]');
  $input.change(function() {
    if ($('input[name="name123[data][]"]:checked').val() === 'value-c') {
      $('.text').show();
    } else {
      $('.text').hide();
    }
  });
});

.text {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="">
  <label><input type="checkbox" name="name123[data][]" value="value-a"><span class="mwform-checkbox-field-text">Value A</span></label>
  <label><input type="checkbox" name="name123[data][]" value="value-b"><span class="mwform-checkbox-field-text">Value B</span></label>
  <label><input type="checkbox" name="name123[data][]" value="value-c"><span class="mwform-checkbox-field-text">Value C</span></label>
</form>
<div class="text">
  display this text in case "Value C" is checked
</div>

Answer 1

您可以将值粘贴到选择器上以显式检查该输入。这是一个丑陋的选择器，可能可以更有效地完成，但它应该可以工作。

$('input[name="name123[data][]"]:checked[value="value-c"]').length

编辑:实际上看看你的逻辑，你已经将输入缓存在变量中，所以你也可以这样做......

$input.filter('[value="value-c"]:checked').length

这将删除额外的 DOM 查找。