时间戳

首页 > 解决方案 > 选中具有特定值的复选框时如何显示元素？

javascript - 选中具有特定值的复选框时如何显示元素？

问题描述

有三个复选框，我想在检查“值C”时在表单下方显示“文本”。当仅选中“值 C”复选框时，它似乎有效。但是当我选中多个复选框时，例如“Value A”和“Value C”，“text”不会出现。

每当检查“值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>

标签： javascriptjquery

解决方案

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

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

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

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

这将删除额外的 DOM 查找。

推荐阅读