基于选中的单选按钮的标签文本过滤内容

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>