如何從jquery下拉按鈕控制檢查元素

Question

我已經使用這個jQuery dropdown button。這是my fiddle。這是該步驟：

因此，功能：

1. 在選擇時一個選項，會出現一個包含該選項標題的新框。例如，如果您點擊下拉菜單中的「低」，則會出現一個新框，其中包含帶有十字按鈕的文字「低」。

我已經寫腳本這樣的：

$('.low-option input[type=checkbox]').change(function(){ 
    if($(this).prop('checked')){ 
     $('#low-box').show(); 
    } else { 
     $('#low-box').hide(); 
    } 
}); 

如果通過單擊十字按鈕卸下盒，包裝盒將被刪除，相鄰的複選框將沒有檢查。

所以，我寫這樣的：

$('.option-box').on('click', '.cross', function() { 
    $(this).parent().remove(); 
}); 

if($('#low-box').is(":hidden")) { 
    $('.low-option input[type=checkbox]').prop('checked', false); 
} 

div.option-content被隱藏在第一。如果有任何div.option-box可見，div.option-content也將可見。如果沒有可見的div.option-box，則div.option-content將始終隱藏。

要做到這一點，我寫了這個：

var count = $('.option-content .option-box').is(":visible").length; 
if (count > 0){ 
    $('.option-content').show(); 
} else{ 
    $('.option-content').hide(); 
} 

但是，我的腳本不能正常工作。因爲，我對jQuery不是很擅長，我找不到原因，也無法做到正確。你能幫我解決腳本中的問題嗎？

Answer 1

在這裏，我重新編寫代碼，以便它會變得更加可擴展..你錯過了最重要的部分是有關/與你option-box連接checkbox，所以這將是您更容易hide或show相關的元素。檢查出這工作Fiddle。

$('.dropdown-menu input[type=checkbox]').change(function(){ 
    if($(this).prop('checked')){ 
     $('.option-content').show(); 
     $('.option-content #'+$(this).prop('id')).show(); 

    } else { 
     $('.option-content #'+$(this).prop('id')).hide(); 
     if($('.option-content .option-box:visible').length == 0){ 
      $('.option-content').hide(); 
     } 
    } 
}); 

$('.option-box').on('click', '.cross', function() { 
    $('.dropdown-menu #'+$(this).parent().prop('id')).prop('checked', false); 
    $(this).parent().remove() 
    if($('.option-content .option-box:visible').length == 0){ 
     $('.option-content').hide(); 
    } 
}); 

乾杯..