Fatal编程技术网
  • jquery/
  • Jquery 基于复选框选择显示div集

Jquery 基于复选框选择显示div集

jquery checkbox

Jquery 基于复选框选择显示div集,jquery,checkbox,Jquery,Checkbox,我正在尝试为这个脚本寻找JQ替代方案问题是我想使用类而不是ID，单个div可以有多于1个类，因此可以在选中checkbox1或checkbox2或两者后显示。你知道怎么做吗 function toggle(matchingAttribute) { // optain all div elements in the page var divArray = document.getElementsByTagName("div"); for(i=divArray.lengt

我正在尝试为这个脚本寻找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()
试试这个

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

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

这些示例似乎基于三个不同的参数。位置、类型和成本

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

请参见下面的示例

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>

位置：


新泽西州
纽约
计算机断层扫描


价值：


便宜的
中庸的
昂贵的


类型：


汉堡
披萨
三明治






NJ Place[廉价汉堡]
NJ Place[中等汉堡]
NJ Place[昂贵的汉堡]
NJ Place[廉价比萨饼]
NJ Place[中等比萨饼]
NJ Place[昂贵的比萨饼]
NJ Place[便宜的巫婆]
NJ Place[中度巫婆]
NJ Place[昂贵的巫婆]
纽约广场[廉价汉堡]
纽约广场[中等汉堡]
纽约广场[昂贵的汉堡]
纽约广场[廉价比萨饼]
纽约广场[中等比萨饼]
纽约广场[昂贵的比萨饼]
纽约广场[廉价的巫婆]
纽约广场[中度巫婆]
纽约广场[昂贵的巫婆]
CT Place[廉价汉堡]
CT Place[中等汉堡]
CT Place[昂贵的汉堡]
CT Place[廉价比萨饼]
CT Place[中等比萨饼]
CT Place[昂贵的比萨饼]
CT Place[便宜的巫婆]
CT地点[中度巫婆]
CT Place[昂贵的巫婆]
这些示例似乎基于三个不同的参数。位置、类型和成本

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

请参见下面的示例

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>

位置：


新泽西州
纽约
计算机断层扫描


价值：


便宜的
中庸的
昂贵的


类型：


汉堡
披萨
三明治






NJ Place[廉价汉堡]
NJ Place[中等汉堡]
NJ Place[昂贵的汉堡]
NJ Place[廉价比萨饼]
NJ Place[中等比萨饼]
NJ Place[昂贵的比萨饼]
NJ Place[便宜的巫婆]
NJ Place[中度巫婆]
NJ Place[昂贵的巫婆]
纽约广场[廉价汉堡]
纽约广场[中等汉堡]
纽约广场[昂贵的汉堡]
纽约广场[廉价比萨饼]
纽约广场[中等比萨饼]
纽约广场[昂贵的比萨饼]
纽约广场[廉价的巫婆]
纽约广场[中度巫婆]
纽约广场[昂贵的巫婆]
CT Place[廉价汉堡]
CT Place[中等汉堡]
CT Place[昂贵的汉堡]
CT Place[廉价比萨饼]
CT Place[中等比萨饼]
CT Place[昂贵的比萨饼]
CT Place[便宜的巫婆]
CT地点[中度巫婆]
CT Place[昂贵的巫婆]
我没有问这个问题；）。我也试着编写一个解决方案，不要使用“rel”，而是使用数据属性，因为它们在语法上更正确。“rel”应该只用于锚定标记，以表示当前文档和链接文档之间的关系。我没有问这个问题；）。我也试着编写一个解决方案，不要使用“rel”，而是使用数据属性，因为它们在语法上更正确。“rel”仅用于锚定标记，以表示当前文档和链接文档之间的关系。