Jquery 如果选中或未选中复选框，如何显示/隐藏内容

我有一些jQuery，它将根据在下拉字段中选择的值显示/隐藏隐藏的div：

$('.hidden-content-here').hide();
$('select[name="my_field_name_here"]')
  .on('change', function() {
    var $this = $(this),
        selected = $this.find(':selected').val(),
        options = ['Yes'];

    $('.hidden-content-here').hide();
    if(options.indexOf(selected) > -1) {
      $('.my_field_name_here').toggle();
    }
  })
.trigger('change');

下面是HTML：

<label>Hide/Unhide Hidden Content</label>
<select name="my_field_name_here">
 <option value="No">No</option>
 <option value="Yes">Yes</option>
</select>

<div class="hidden-content-here">
  <!--Hidden content here-->
</div>

隐藏/取消隐藏隐藏内容
不
对

这工作正常-如果页面加载并且下拉字段已经有“是”的值，则将显示隐藏的内容。如果页面加载且下拉列表没有“是”值，则隐藏内容将不会显示。当选择不同的值时，它将改变

我的问题是，我需要将字段从下拉列表更改为复选框，但我不知道如何将jQuery改为使用这种不同类型的字段。如果选中复选框字段，其值将为“是”，HTML将改为如下所示：

隐藏/取消隐藏隐藏内容

---

感谢您提供的帮助。

您可以使用更改事件以及选中/取消选中复选框的状态作为

的参数。toggle（）

函数用于做出

的显示隐藏决定。我的字段\u名称\u在此

：

$('input[name="my_field_name_here"]').on('change', function() {
  $('.my_field_name_here').toggle(this.checked);
}).trigger('change');

---

嗨，米林，谢谢你。这是我使用的最后一段代码，如果您想用它编辑您的答案，那么我可以将其标记为解决方案，它似乎适合我？或者让我知道我是否可以以更好的方式修改您的代码：