有复选框显示某些东西?

时间:2016-01-29 00:41:11

标签: javascript jquery html css html5

完全不知道如何做到这一点或从哪里开始。我喜欢使用jQuery。

我想要一份约300件物品的清单。每个项目分配一个到几个不同的类别。

E.g:

产品:

香蕉, 橙子, 起司, 蛋糕

分类

水果, 黄色, 棕色, 橙子, 甜点

这些项目的分配方式如下:

香蕉 - 黄色,水果

橘子 - 橙子,水果

奶酪 - 黄色

蛋糕 - 布朗,甜点

我需要能够勾选任何复选框的组合 - 例如如果我勾选黄色和水果'它会显示橙子,香蕉和奶酪。 (请注意,我需要所有东西都是黄色加上所有东西都是水果,而不仅仅是黄色水果)。或者,如果我只勾选黄色,它会显示奶酪和香蕉。如果我勾选甜点和橙子,它会显示蛋糕和橙子。希望你能明白我的意思。

我非常感谢任何有关如何实现这一目标的见解或帮助,谢谢。

2 个答案:

答案 0 :(得分:3)

我会创建一个对象数组,其中每个对象都有一个name属性和一个categories属性,该属性是一个字符串数组,其中每个字符串都是该对象所属的类别名称。然后,您可以检查选中哪个类别复选框,然后循环浏览所有对象,仅显示其所有类别中包含所有选定类别的对象'属性。您可以通过创建具有所选对象属性的循环的元素来显示它们。您可以在for循环中使用for循环找到正确的对象:

伪代码:

//loop through the array of objects
//    for ever element, loop through its `categories` property and check if
//    it has the current element in the array of selected categories 
//    (`selected`). Then, do that for every element in `selected`

我知道这可能会让人感到困惑,如果是的话,我道歉,但我希望它有所帮助。

答案 1 :(得分:2)

Matt B.由于您是网络开发的新手,让我告诉您一个我认为可能最适合您的解决方案,因为我的经验就是这样。你是网络开发的新手,所以我建议你现在不要使用MySql作为数据库而将PHP作为逻辑基础...所以我认为你必须专注于HTML,CSS& JS现在让我指导你如何实现这个目标,重点是...... 1.创建一个结构如下的html文件

<input class="yFruit" type="checkbox" value="YellowFruit"> Yellow Fruit<br>
<input class="rFruit" type="checkbox" value="RedFruit"> Red Fruit<br>
<div class="itemsContainer">
    <div class="item" data-category="YellowFruit"> Banana </div>
    <div class="item" data-category="RedFruit"> Apple </div>
</div>
  1. 使用Css根据需要设置这些元素的样式

  2. 现在是Javascript的时间

  3. 你知道javascripts事件在这种情况下是非常有用的,就像当我点击某些东西时,我可以检测到我点击了什么elemenet。就像我们选择其中一个用html创建的复选框一样,我们可以看到它与所有元素匹配的值(在这种情况下所有的水果都带有class =“item”)我们可以为每个元素添加css属性item也喜欢,如果我们想隐藏一些我们可以做的元素,现在也可以查看代码。

    // JS Code
    // assigning all the checkbox in variables
    var yFruit = document.querySelector(".yFruit");
    var rFruit = document.querySelector(".rFruit");
    // allItems is an array containing all the item elements in it
    var allItems= document.querySelectorAll(".item");
    
    // creating a function to only show the yFruit
     function showYFruitOnly(){
        for (i = 0; i < allItems.length; i++) {
            if(allItems[i].getAttribute("data-category") == "YellowFruit"){
                // display only if it is from yellow fruit category
                allItem[i].style.display = "block";
            }else{
                // do not display if it is not from that category  
                allItem[i].style.display = "none";
            }
        }
     }
    
    // code below this line is checking if yFruit is checked or not 
    //every time some one clicks on it
    // if it is checked then the code is running
    yFruit.onchange = function(){
    if(yFruit.checked == true){
        // running the showYFruitOnly function if checkbox is checked
        showYFruitOnly;
    }
    }
    

    你可以为更多的病例等创建更多功能等尝试这个,我打赌你会学到很多这样做....