Jquery 使用单选按钮过滤内容（显示/隐藏）答案

【问题标题】：Jquery filtering content (show / hide ) using radio buttonsJquery 使用单选按钮过滤内容（显示/隐藏）
【发布时间】：2016-03-11 16:35:11
【问题描述】：

嘿，我正在寻找一个非常简单的 jQuery 代码，该代码在选择某个单选按钮时显示一个 div，如果该单选按钮根据单选按钮的值“取消选择”，则隐藏该 div。

我想出了如何让它与一个过滤器的单选按钮一起工作，但我想为两个过滤器解决这个问题

基于它属于哪个类型
基于........数量

这是适用于第一个过滤器（类型）的代码：

<script>
    var $filters = $("input:radio[name='type']"); 


var $categoryContent = $('#mainhide .mainresultbox');
var $errorMessage = $('#errorMessage');
$filters.click(function() {
    // if any of the radio buttons for brand are checked, you want to show div's containing their value, and you want to hide all the rest.
    $categoryContent.hide();
     var $selectedFilters = $filters.filter(':checked');
    if ($selectedFilters.length > 0) {
        $errorMessage.hide();
        $selectedFilters.each(function (i, el) {
            $categoryContent.filter(':contains(' + el.value + ')').show();
        });
    } else {
        $errorMessage.show();
    }

});
</script>

这是单选按钮的 HTML。

<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"> brand1</label></li>
    <li><label for="cdi"><input type="radio" id="cdi" name="type" value="brand3"> brand1</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 及其内容

<div id="#mainhide">
  <div>brand1 in stock - 10</div>
  <div>brand1 in stock - 20</div>
  <div>brand1 in stock - 30</div>
</div>
<div id="errorMessage">reset all fliters</div>

我怎样才能让这两个过滤器都工作，任何人都可以帮助我......

谢谢你，纳雷什·卡米雷迪

【问题讨论】：

您的代码很奇怪。您使用名为 fli 的复选框作为过滤器，但您提到的 html 代码中没有此类复选框元素。
我已经编辑了问题，你现在可以检查一下吗@Milind Anantwar
：根据您提到的两个过滤器，您想要做什么活动

标签： jquery

【解决方案1】：

id 中不能使用特殊字符，id 应遵循有效规则。你使用了<div id="#mainhide">.这是无效的id名称

使用：<div id="mainhide">

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

【讨论】：

【解决方案2】：

我不确定你到底想要什么，但你可以看看这个：

也是<div id="mainhide"> 而不是<div id="#mainhide">

http://jsfiddle.net/yyCSQ/3/

【讨论】：

【解决方案3】：

您可以像使用属性选择器一样重新过滤：

var $selectedFilters = $filters.filter(':checked').filter('[value="10"]';

我也会使用$(document).ready(function(){[your code here]});，而不是在页面仍在加载时疯狂加载 JS。而且我还建议不要按照其他人的建议在您的 ID 中使用#。

JQuery documentation

【讨论】：