選擇複選框上的元素選擇

我想隱藏選擇元素開啓/關閉複選框。但它不工作。選擇複選框上的元素選擇

在頁面加載我希望選擇被隱藏，並選中複選框我希望它是可見的。

的代碼是

<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

選擇複選框上的元素選擇

回答

相關問題