チェックされたラジオボタンのラベルテキストに基づいたコンテンツのフィルタリング

Question

チェックされたラジオボタンの値に基づいてコンテンツをフィルタリングするコードがあります。ラジオボタンのラベルテキストをチェックします。以下はそのコードです。

$(function() { 
 
    var $filters = $("input:radio"); 
 
    var $categoryContent = $('#mainhide div'); 
 

 
    $filters.click(function() { 
 
    $categoryContent.hide(); 
 
    var $selectedFilters = $(this).closest('ul').find(':radio').filter(':checked'); 
 
    $categoryContent.filter(':contains(' + $selectedFilters.val() + ')').show(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li> 
 
    <label for="cdg"> 
 
     <input type="radio" id="cdg" name="type" value="brand1" />brand1</label> 
 
    </li> 
 
    <li> 
 
    <label for="cdh"> 
 
     <input type="radio" id="cdh" name="type" value="brand2" />brand2</label> 
 
    </li> 
 
    <li> 
 
    <label for="cdi"> 
 
     <input type="radio" id="cdi" name="type" value="brand3" />brand3</label> 
 
    </li> 
 
</ul> 
 
<ul> 
 
    <li> 
 
    <label for="cdj"> 
 
     <input type="radio" id="cdj" name="quantity" value="10" />10</label> 
 
    </li> 
 
    <li> 
 
    <label for="cdk"> 
 
     <input type="radio" id="cdk" name="quantity" value="20" />20</label> 
 
    </li> 
 
    <li> 
 
    <label for="cdl"> 
 
     <input type="radio" id="cdl" name="quantity" value="30" />30</label> 
 
    </li> 
 
</ul> 
 

 
<div id="mainhide"> 
 
    <div>brand1 in stock - 10</div> 
 
    <div>brand2 in stock - 20</div> 
 
    <div>brand3 in stock - 30</div> 
 
</div>

どのように私は私がどのラジオボタンをチェックするとき、それはとても#mainhide divのコンテンツが選択されたラジオボタンのラベルテキストに応じて表示する必要がありますすることができます。

Answer 1

現在のスクリプトをこれら2行で更新します。

これで、選択した入力が現在と同じように返され、親を見つけてラベルテキストを取得します。空白のため、トリムを使用します。

var lbl = $selectedFilters.parent().text(); 

$categoryContent.filter(':contains(' + $.trim(lbl) + ')').show(); 

http://codepen.io/partypete25/pen/rLkAbv

Answer 2

あなたが好きなものを使用することができます。

$("input[name=type]:checked").val() 
$("input[name=quantity]:checked").val() 

function init() { 
 
    $("#brandName").text($("input[name=type]:checked").val()); 
 
    $("#qty").text($("input[name=quantity]:checked").val()); 
 
} 
 
$(function() { 
 
    init(); 
 
    $("input[type=radio]").click(init); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li> 
 
    <label for="cdg"> 
 
     <input type="radio" id="cdg" name="type" value="brand1" checked />brand1</label> 
 
    </li> 
 
    <li> 
 
    <label for="cdh"> 
 
     <input type="radio" id="cdh" name="type" value="brand2" />brand2</label> 
 
    </li> 
 
    <li> 
 
    <label for="cdi"> 
 
     <input type="radio" id="cdi" name="type" value="brand3" />brand3</label> 
 
    </li> 
 
</ul> 
 
<ul> 
 
    <li> 
 
    <label for="cdj"> 
 
     <input type="radio" id="cdj" name="quantity" value="10" checked />10</label> 
 
    </li> 
 
    <li> 
 
    <label for="cdk"> 
 
     <input type="radio" id="cdk" name="quantity" value="20" />20</label> 
 
    </li> 
 
    <li> 
 
    <label for="cdl"> 
 
     <input type="radio" id="cdl" name="quantity" value="30" />30</label> 
 
    </li> 
 
</ul> 
 

 
<div id="content"><span id="brandName"></span> in stock - <span id="qty"></span> 
 
</div>