Javascript基于单选按钮显示隐藏

我有一些粗略的代码，可以根据两个单选按钮过滤一些结果。我正在努力添加第三个变体，作为“全部显示”，即同时显示所有四个div。任何帮助都将不胜感激

<p class="text1">Variants
 <label>
   <input type="radio" name="type" value="variant-2" id="type_0" checked="checked" />
   Variant 1</label>
 <label>
   <input type="radio" name="type" value="variant-1" id="type_1" />
   Variant 2</label>
</p>


<script>
$(document).ready(function(){
  $("input[name$='type']").click(function(){
  var value = $(this).val();
  if(value=='variant-2') {
    $(".variant-1").show();
     $(".variant-2").hide();
}
else if(value=='variant-1') {
 $(".variant-2").show();
  $(".variant-1").hide();
 }
});
 $(".variant-1").show();
 $(".variant-2").hide();
});

</script>


<div class="variant-1">Variant 1</div>

<div class="variant-2">Variant 2</div>

<div class="variant-1">Variant 1.1</div>

<div class="variant-2">Variant 2.1</div>

变体
变式1
变式2

$（文档）.ready（函数（）{
$（“输入[name$='type']）。单击（函数（）{
var值=$（this.val（）；
如果（值=='variant-2'）{
$（“.variant-1”）.show（）；
$（“.variant-2”）.hide（）；
}
else if（值=='variant-1'）{
$（“.variant-2”）.show（）；
$（“.variant-1”）.hide（）；
}
});
$（“.variant-1”）.show（）；
$（“.variant-2”）.hide（）；
});
变式1
变式2
变式1.1
备选案文2.1

这个怎么样

变体
变式1
变式2
全部的

变式1
变式2
变式1.1
备选案文2.1
​
$（“输入[name$='type']）。单击（函数（）{
var值=$（this.val（）；
如果（值==“变量-2”）{
$（“.variant-1”）.show（）；
$（“.variant-2”）.hide（）；
}
else if（值=='variant-1'）{
$（“.variant-2”）.show（）；
$（“.variant-1”）.hide（）；
}
else if（值=='variant all'）{
$（“.variant”）.show（）；
}
});
$（“.variant-1”）.show（）；
$（“.variant-2”）.hide（）；​

这个怎么样

变体
变式1
变式2
全部的

变式1
变式2
变式1.1
备选案文2.1
​
$（“输入[name$='type']）。单击（函数（）{
var值=$（this.val（）；
如果（值==“变量-2”）{
$（“.variant-1”）.show（）；
$（“.variant-2”）.hide（）；
}
else if（值=='variant-1'）{
$（“.variant-2”）.show（）；
$（“.variant-1”）.hide（）；
}
else if（值=='variant all'）{
$（“.variant”）.show（）；
}
});
$（“.variant-1”）.show（）；
$（“.variant-2”）.hide（）；​

试试这个检查

试试这个检查

---

试试这个。。它简化了你的if-else

$(document).ready(function() {
    $("input[name$='type']").click(function() {        
        var value = $(this).val();
        if (value == 'showall') {
            $('div[class^=variant]').show();
        } else {
            var $thisClass = $('div.' + value);
            $thisClass.show();
            $('div[class^=variant]').not($thisClass).hide();
        }
    });
    $("input[value=variant-1]").click();
});​

---

试试这个。。它简化了你的if-else

$(document).ready(function() {
    $("input[name$='type']").click(function() {        
        var value = $(this).val();
        if (value == 'showall') {
            $('div[class^=variant]').show();
        } else {
            var $thisClass = $('div.' + value);
            $thisClass.show();
            $('div[class^=variant]').not($thisClass).hide();
        }
    });
    $("input[value=variant-1]").click();
});​

---

尝试基于属性“class”的此解决方案

   <p class="text1">Variants
 <label>
   <input class="gr" type="radio" name="type" value="one" id="type_0" checked="checked" />
   Variant 1</label>
 <label>
   <input class="gr" type="radio" name="type" value="two" id="type_1" />   Variant 2</label>
<label>
   <input class="gr" type="radio" name="type" value="all" id="type_all" />  All</label>

</p>

</br>
</br>
</br>


<div class="variant-1 one all">Variant 1</div>

<div class="variant-2 two all">Variant 2</div>

<div class="variant-1 one all">Variant 1.1</div>

<div class="variant-2 two all">Variant 2.1</div>

$(document).ready(function(){
    $(".gr").click(function(){
        var value = $(this).attr('value');
        $('.all').hide();        
        $('.'+value ).show();
    })
});​

HTML

---

尝试基于属性“class”的此解决方案

   <p class="text1">Variants
 <label>
   <input class="gr" type="radio" name="type" value="one" id="type_0" checked="checked" />
   Variant 1</label>
 <label>
   <input class="gr" type="radio" name="type" value="two" id="type_1" />   Variant 2</label>
<label>
   <input class="gr" type="radio" name="type" value="all" id="type_all" />  All</label>

</p>

</br>
</br>
</br>


<div class="variant-1 one all">Variant 1</div>

<div class="variant-2 two all">Variant 2</div>

<div class="variant-1 one all">Variant 1.1</div>

<div class="variant-2 two all">Variant 2.1</div>

$(document).ready(function(){
    $(".gr").click(function(){
        var value = $(this).attr('value');
        $('.all').hide();        
        $('.'+value ).show();
    })
});​

HTML

---

但是，更好的方法是使用两个类，

variant

和

variant-1

（或2），这样您就知道

variant

是什么，然后可以区分类型，更类似于，更好的方法是使用两个类，

variant

和

variant-1

（或2）所以你知道什么是

变体

，然后可以区分类型，更像是非常感谢，这真的很有帮助。非常感谢，这真的很有帮助。感谢你的建议和帮助简化我的代码-一直在学习！感谢您的建议和帮助简化我的代码-始终学习！