Javascript show hide基于单选按钮 [英] Javascript show hide based on radio buttons

问题描述

我有一些粗略的代码，允许我根据两个单选按钮过滤一些结果。我正在努力添加第三个变体，它将作为全部显示，即一次显示所有四个div。非常感谢任何帮助。

I've got some rough-and-ready code that allows me to filter some results based on two radio buttons. I'm struggling to add a third variant that will serve as a 'show all', ie to display all four divs at once. Any help would be much appreciated.

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

推荐答案

这个怎么样？ http://jsfiddle.net/WyxmF/1

<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>
 <label>
   <input type="radio" name="type" value="variant-all" id="type_all" />
   All</label>
</p>

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

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

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

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


$("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();
    }
    else if (value == 'variant-all') {
        $(".variant").show();
    }
});
$(".variant-1").show();
$(".variant-2").hide();​

这篇关于Javascript show hide基于单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！