階層形式と入力

Question

私のページにはいくつかのフィルタがあり、ユーザの選択に応じていくつかの入力を非表示にしたいと考えています。

EMEAが選択されている場合は、地域と国を使用した例では、提出がクリックされたときに2番目のフィルタが英国とフランスのみのオプションとして提供されます。しかし、フランスが第2のフィルターから直接提出された場合は、リージョンフィルターで値を非表示にしたくありません。

だから私は、地域フィルタの値を取得することができるが、私は国をフィルタリングするために使用する方法はありません...

HTML：

<div id="filter1"> 
<form action='#'> 
<legend>Region</legend> 
<input type="checkbox" value="all" class="select-all" checked>(All)<br> 
<input type="checkbox" value="americas" class="checkboxlistitem americas" checked>Americas<br> 
<input type="checkbox" value="apac" class="checkboxlistitem apac" checked>APAC<br> 
<input type="checkbox" value="emea" class="checkboxlistitem emea" checked>EMEA<br> 
<input type="submit" value="Apply"> 
</form> 
</div> 

<div id="filter2"> 
<form action='#'> 
<legend>Country</legend> 
<input type="checkbox" value="all" class="select-all" checked>(All)<br> 
<input type="checkbox" value="us" class="checkboxlistitem americas" checked>US<br> 
<input type="checkbox" value="uk" class="checkboxlistitem emea" checked>UK<br> 
<input type="checkbox" value="india" class="checkboxlistitem apac" checked>India<br> 
<input type="checkbox" value="france" class="checkboxlistitem emea" checked>France<br> 
<input type="submit" value="Apply"> 
</form> 
</div> 

JS：

// Hide none relevant items 
$("[type='submit']").click(function(event){ 
event.preventDefault(); 
var checkedValue = $("[type='checkbox']:checked", $(this).parent()).map(function(){ 
    return $(this).val(); 
}).get(); // 
var filterName = $(this).closest('div').attr('id'); 
alert(checkedValue); 
alert(filterName); 
}); 

JSFIDDLE：

https://jsfiddle.net/Max06270/jutx6snm/

事前のおかげで、最大

Answer 1

あなたはこの

$("#region").click(function(event) { 
    event.preventDefault(); 
    $('#filter1 input').each(function() { 
    var value = $(this).val(); 
    var checkbox = $("#filter2 input[region=" + value + "]"); 
    if($(this).is(':checked')){ 
     checkbox.prop('checked', true).show(); 
     checkbox.closest('label').show(); 
    }else{ 
     checkbox.prop('checked', false).hide(); 
     checkbox.closest('label').hide(); 
    } 
    }); 
}); 

全例のような何かを行うことができ、ここでhttps://jsfiddle.net/jutx6snm/11/