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

嘿，我正在寻找一个非常简单的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>

var$filters=$（“输入：radio[name='type']）；
var$categoryContent=$（“#mainhide.mainresultbox”）；
var$errorMessage=$（“#errorMessage”）；
$filters.单击（函数（）{
//如果选中了品牌的任何单选按钮，则需要显示包含其值的div，并隐藏其余所有按钮。
$categoryContent.hide（）；
变量$selectedFilters=$filters.filter（':checked'）；
如果（$selectedFilters.length>0）{
$errorMessage.hide（）；
$selectedFilters.每个（功能（i，el）{
$categoryContent.filter（':contains（'+el.value+'））.show（）；
});
}否则{
$errorMessage.show（）；
}
});

这是单选按钮的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>

品牌1
品牌1
品牌1


十,
二十
三十

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

品牌1库存-10
品牌1库存-20
品牌1库存-30
重置所有飞片

我怎样才能使这两个过滤器都工作，谁能帮我

谢谢,，

---

Naresh Kamireddy

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

而且它的

不是

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 (".").

---

您不能在id中使用特殊字符，id应遵循有效规则。 您使用了

这是无效的id名称

使用：

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 (".").

更多信息：

---

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

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

我还将使用

$（document.ready（function（）{[yourcodehere]}）而不是在页面仍在加载时大量加载JS。
我还建议不要像其他人建议的那样在ID中使用
#

您的代码很奇怪。您使用了名为fli的复选框作为筛选器，但您提到的html代码中没有此类复选框元素。我已编辑了问题@Milind Anantwar：您想根据您提到的两个筛选器执行哪些活动