Question

我有一些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将显示为：

隐藏/取消隐藏隐藏内容

感谢您提供任何帮助。

Answer 1

您可以使用更改事件以及选中/取消选中复选框的状态作为.toggle()函数的参数，以便显示.my_field_name_here的显示隐藏决定：

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

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

1 个答案: