基於選中的單選按鈕的標籤文本過濾內容

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

用這兩行更新你當前的腳本。

因此，它會像現在一樣返回選定的輸入，找到父級，然後獲取標籤文本。由於白色空間，我們然後使用修剪。

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>