以前のラジオで設定されたデータソケットを持つラジオだけを表示

Question

私はdellなどのように私のサイトのカスタムコンピュータビルダーを作っています。

基本的にあなたがあなたのプロセッサを選択することができ、それらのためのHTMLは次のようになります。

<div class="process_intel_options" style="display:block"> 
    <label class="option"> 
     <input type="radio" name="processor_options" value="124" data-price="195.82" data-socket="1366" class="calculation-item" id="intel_options_0" checked="checked" /> 
     Intel Core i7 960 3.20Ghz (Nehalem) <span class="item_price positive">+0</span> </label> 
    <br /> 
    <label class="option"> 
     <input type="radio" name="processor_options" value="149" data-price="250.00" data-socket="1155" class="calculation-item" /> 
     Processor socket 1155 <span class="item_price positive">+0</span> </label> 
    <br /> 
    <label class="option"> 
     <input type="radio" name="processor_options" value="125" data-price="359.99" data-socket="1366" class="calculation-item" /> 
     Intel Core i7 980 3.33Ghz (Gulftown) <span class="item_price positive">+0</span> </label> 
    <br /> 
</div> 
<div class="process_amd_options" style="display:none"> 
    <label class="option"> 
     <input type="radio" name="processor_options" value="126" data-price="133.32" data-socket="am3" class="calculation-item" id="amd_options_0" /> 
     AMD Bulldozer FX-8 Eight Core 8120 3.10Ghz <span class="item_price positive">+0</span> </label> 
    <br /> 
    <label class="option"> 
     <input type="radio" name="processor_options" value="127" data-price="162.99" data-socket="am3" class="calculation-item" /> 
     AMD Bulldozer FX-8 Eight Core 8150 3.60Ghz <span class="item_price positive">+0</span> </label> 
</div> 

お知らせ属性data-socket。

<div class="mobo_options"> 
    <label class="option"> 
     <input type="radio" name="motherboard_options" value="145" data-price="178.00" data-socket="1155" class="calculation-item" id="mobo_options_0" checked="checked" /> 
     Motherboard 1 socket 1155 <span class="item_price positive">+0</span> </label> 
    <br /> 
    <label class="option"> 
     <input type="radio" name="motherboard_options" value="146" data-price="180.00" data-socket="1155" class="calculation-item" /> 
     Motherboard 2 socket 1155 <span class="item_price positive">+0</span> </label> 
    <br /> 
    <label class="option"> 
     <input type="radio" name="motherboard_options" value="147" data-price="190.00" data-socket="1366" class="calculation-item" /> 
     Motherboard 3 socket 1366 <span class="item_price positive">+0</span> </label> 
    <br /> 
    <label class="option"> 
     <input type="radio" name="motherboard_options" value="148" data-price="200.00" data-socket="2011" class="calculation-item" /> 
     Motherboard 4 socket 2011 <span class="item_price positive">+0</span> </label> 
    <br /> 
</div> 

これも持っているデータ・ソケット：

その後、マザーボードを選択することができます。

正しいソケットタイプのマザーボードを表示するクエリスクリプトを探しています。たとえば、プロセッサがdata-socket="1155"で選択されている場合は、data-socket="1155"のマザーボードのみが表示されます一つは、彼らが異なるプロセッサを選択する場合に選択する必要があります。

誰も私を助けることができますか？

Answer 1

何かがそれを行う必要があります。

$('input:radio[name="processor_options"]').change(function(e) { 
    var socket = $(this).data('socket'); 
    $('div.mobo_options input:radio[data-socket!="' + socket + '"]').hide(); 
    $('div.mobo_options input:radio[data-socket="' + socket + '"]').show().get(0).checked = true; 
}); 

それだけ<input type="radio">要素を隠すことに注意してください、ではないテキストそれらに付随する。その代わりに隠すことができる別の要素（の中に<ul>など）で囲むこともできます。そのため、付随するテキストも非表示になります。

DEMO

---

ちょうどあなたが、<label>要素に包まれ<input>要素を持って気づいたあなたにもテキストを非表示にする代わりに、次のコードを使用できるよう：

$('input:radio[name="processor_options"]').change(function(e) { 
    var socket = $(this).data('socket'); 
    $('div.mobo_options input:radio[data-socket!="' + socket + '"]').closest('label').hide(); 
    $('div.mobo_options input:radio[data-socket="' + socket + '"]').closest('label').show().end().get(0).checked = true; 
}); 

Updated DEMO

Answer 2

をあなたはちょうどあなたがjQueryの

$('[data-socket="someValue"][name="motherboard_options"]') 

を使用している場合、あなたはこれを試みることができる data-socket="someValue"とすべてのマザーボードを検索したい場合は

これは、あなたの名前motherboard_optionsとソケットの値を持つすべてのオプションを提供します。このような「someValueの」