Javascript 选中复选框上的元素选择

我试图在复选框的开/关上显示隐藏选择元素。但它不起作用

在页面加载时，我希望选择隐藏，在选中复选框时，我希望它可见

代码是

<input type="checkbox" id="inputBasicOff"  checked />
<select  id="fieldSelect" data-placeholder="Choose Field"> 
  <option>1</option>
  <option>2</option>
  <option>3</option>

</select>

---

你可以这样做

$("#inputBasicOff").change(function () {
    this.checked ? $("#fieldSelect").fadeIn() : $("#fieldSelect").fadeOut()
});

代码的问题是，您正在尝试使用属性（名称）选择器选择元素。当前该元素上没有name属性

您的

hide（）

调用似乎位于完全不同的元素上。如果您选择了正确的元素，您的代码应该可以工作。也就是说，您可以通过使用

toggle（）

对其进行改进：

---

请注意，小提琴对

站点的引用已被注释掉-我假设这是您自己定义的方法/属性，因为它不是标准的。
现在请尝试这种方式


$（文档）.ready（函数（）{
$（'#inputBasicOff'）。on（'change'，function（）{
$（“#字段选择”）.toggle（）；
});
});

1.
2.
3.
或：
$（“#fieldSelect”）.toggle（选中此项）但OP使用的是
fadeIn（）
，这里没有动画
$("#inputBasicOff").change(function () {
    this.checked ? $("#fieldSelect").fadeIn() : $("#fieldSelect").fadeOut()
});

(function (document, window, $) {
    'use strict';
    var Site = window.Site;
    $(document).ready(function () {
        Site.run();
        $('#fieldSelect').hide();
        $("#inputBasicOff").change(function () {
            $('#fieldSelect').toggle(this.checked);
        });
    });
})(document, window, jQuery);