Question

我正在尝试为此脚本link to see exampe找到JQ替代方案，问题是我想使用类而不是ID，而单个div可以有多于1个类，因此可以在检查checkbox1后显示checkbox2或两者。知道如何使其有效吗？

function toggle(matchingAttribute) {
    // optain all div elements in the page
    var divArray = document.getElementsByTagName("div");
      for(i=divArray.length-1; i>=0; i--) {  // for each div
      if(divArray[i].id.match("_"+matchingAttribute+"_")) {
        if(divArray[i].style.display != 'none') {
          divArray[i].style.display = 'none';
        }
        else {
          divArray[i].style.display = '';
        }
      }
    }
  }  // end function toggle()

Answer 1

试试这个

$('.chk').click(function(){
    var className = $(this).attr('data-class');
    if ($(this).is(':checked'))
    {
        $('.'+className+'').show();
    }
    else
    {
        $('.'+className+'').hide();
    }
});

FIDDLE

Answer 2

看起来这些示例基于三个不同的参数。位置，类型和成本

您可以使用数据属性设置复选框，然后将所有div设置为类，以便分别打开和关闭它们。

请参阅下面的示例。

http://jsfiddle.net/YH5wA/1/

<强> JQUERY

$(document).ready(function(){
    $(".Selector").click(function(){
        var Attribute = $(this).data("attribute");
        if($(this).prop('checked'))
        {
            $(".Options div." + Attribute).show();
        }
        else
        {
            $(".Options div." + Attribute).hide();
        }
    });
});

<强> HTML

    Location:
    <br />
    <input class="Selector" type="checkbox" checked data-attribute="nj"> NJ
    <input class="Selector" type="checkbox" checked data-attribute="ny"> NY
    <input class="Selector" type="checkbox" checked data-attribute="ct"> CT
    <br />
    Value:
    <br />
    <input class="Selector" type="checkbox" checked data-attribute="cheap"> Cheap
    <input class="Selector" type="checkbox" checked data-attribute="moderate"> Moderate
    <input class="Selector" type="checkbox" checked data-attribute="expensive"> Expensive
    <br />
    Type:
    <br />
    <input class="Selector" type="checkbox" checked data-attribute="burgers"> Burgers
    <input class="Selector" type="checkbox" checked data-attribute="pizza"> Pizza
    <input class="Selector" type="checkbox" checked data-attribute="sandwiches"> Sandwiches
    <br />
    <br />
    <br />
    <div class="Options">
        <div class="nj cheap burgers">NJ Place [Cheap Burger]</div>
        <div class="nj moderate burgers">NJ Place [Moderate Burgers]</div>
        <div class="nj expensive burgers">NJ Place [Expensive Burgers]</div>
        <div class="nj cheap pizza">NJ Place [Cheap Pizza]</div>
        <div class="nj moderate pizza">NJ Place [Moderate Pizza]</div>
        <div class="nj expensive pizza">NJ Place [Expensive Pizza]</div>
        <div class="nj cheap sandwiches">NJ Place [Cheap Sandwitches]</div>
        <div class="nj moderate sandwiches">NJ Place [Moderate Sandwitches]</div>
        <div class="nj expensive sandwiches">NJ Place [Expensive Sandwitches]</div>
        <div class="ny cheap burgers">NY Place [Cheap Burger]</div>
        <div class="ny moderate burgers">NY Place [Moderate Burgers]</div>
        <div class="ny expensive burgers">NY Place [Expensive Burgers]</div>
        <div class="ny cheap pizza">NY Place [Cheap Pizza]</div>
        <div class="ny moderate pizza">NY Place [Moderate Pizza]</div>
        <div class="ny expensive pizza">NY Place [Expensive Pizza]</div>
        <div class="ny cheap sandwiches">NY Place [Cheap Sandwitches]</div>
        <div class="ny moderate sandwiches">NY Place [Moderate Sandwitches]</div>
        <div class="ny expensive sandwiches">NY Place [Expensive Sandwitches]</div>
        <div class="ct cheap burgers">CT Place [Cheap Burger]</div>
        <div class="ct moderate burgers">CT Place [Moderate Burgers]</div>
        <div class="ct expensive burgers">CT Place [Expensive Burgers]</div>
        <div class="ct cheap pizza">CT Place [Cheap Pizza]</div>
        <div class="ct moderate pizza">CT Place [Moderate Pizza]</div>
        <div class="ct expensive pizza">CT Place [Expensive Pizza]</div>
        <div class="ct cheap sandwiches">CT Place [Cheap Sandwitches]</div>
        <div class="ct moderate sandwiches">CT Place [Moderate Sandwitches]</div>
        <div class="ct expensive sandwiches">CT Place [Expensive Sandwitches]</div>
    </div>

根据复选框选择显示div组

2 个答案: