选择复选框上的元素选择

我想隐藏选择元素开启/关闭复选框。但它不工作。选择复选框上的元素选择

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

的代码是

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

来源

2015-11-04 Jeyaprakash

你可以不喜欢这种方式，

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

与您的代码的问题是，你想选择带有属性（名称）选择器的元素。目前，该元素上没有名称属性。

来源

2015-11-04 11:58:39

或者：'$（ “＃fieldSelect”）来回切换（this.checked）;'但使用'淡入OP是（）' ，这里没有动画 –

@ A.Wolff这是一个很好的选择。 –

您的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引用 - 我想这是你自己定义的方法/属性，因为它不是标准的。

来源

2015-11-04 11:58:46

喜现在尝试这种方式

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<input type="checkbox" id="inputBasicOff" checked /> 
 
<select id="fieldSelect" data-placeholder="Choose Field"> 
 
    <option>1</option> 
 
    <option>2</option> 
 
    <option>3</option> 
 

 
</select>

来源

2015-11-04 12:01:01

选择复选框上的元素选择

回答

相关问题