Question

我有一个代码根据已检查的单选按钮的值过滤内容，我想将其转为选中单选按钮的标签文本。以下是代码;

＆＃13;

$(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();
  });
});

＆＃13;

<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>

＆＃13;

当我选中任何单选按钮时，如何根据所选单选按钮的标签文本显示#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>

根据选中的单选按钮的标签文字

2 个答案: