如何，如果一個複選框被選中顯示/隱藏內容或不

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