如何 show/hide 复选框是否被选中的内容

Question

我有一些 jQuery 将 show/hide 隐藏 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>

这很好用 - 如果页面加载并且下拉字段的值已经是 'Yes'，那么将显示隐藏的内容。如果页面加载并且下拉列表没有 'Yes' 的值，则不会显示隐藏的内容。 And it will change when different values are selected.

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

Hide/Unhide 隐藏内容

感谢您对此的任何帮助。

Answer 1

您可以使用更改事件连同复选框的状态 checked/unchecked 作为 .toggle() 函数的参数来做出 .my_field_name_here:

的显示隐藏决定

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

如何 show/hide 复选框是否被选中的内容

How to show/hide content if a checkbox is checked or not

checkbox

jquery

triggers

toggle