Question

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

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

代码是

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

</select>

JS就是

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

      $('#fieldSelect').fadeIn();
}
else{

 $('#fieldSelect').hide();
}
}); 


  });

})(document, window, jQuery);

Answer 1

你可以这样做，

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

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

Answer 2

您的hide()来电似乎与完全不同的元素有关。如果选择正确的元素，则代码应该有效。也就是说，您可以使用toggle()：

来改进它

(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);

Example fiddle

请注意，小提琴有Site注释掉的引用 - 我认为这是你自己定义的方法/属性，因为它不是标准的。

Answer 3

嗨现在尝试这种方式

＆＃13;

Student

＆＃13;

$(document).ready(function(){
  $('#inputBasicOff').on('change', function(){
    
    
    $('#fieldSelect').toggle();
  });
    
});

＆＃13;

选中复选框上的元素

3 个答案: