根据复选框值过滤 div

Question

我不会费心发布我的 jquery，因为我很确定这都是无稽之谈，因为它不会导致任何错误但仍然没有做任何事情......

<h3>Candidate Experience</h3>

<div class="search_box">
<input type="checkbox" name="3year" id="3yearexp" value="1"> 3+ Years <br>
<input type="checkbox" name="5year" id="5yearexp" value="2"> 5+ Years <br>
<input type="checkbox" name="7year" id="7yearexp" value="3"> 7+ Years <br>
<input type="checkbox" name="10year" id="10yearexp" value="4"> 10+ Years <br>
</div>

<h3><br>Candidate Salary</h3>

<div class="search_box">
<input type="checkbox" name="3039" value="s29"> less than £29,999<br>
<input type="checkbox" name="3039" value="s3039"> £30,000 - £39,999 <br>
<input type="checkbox" name="4059" value="s4059"> £40,000 - £59,999 <br>
<input type="checkbox" name="6079" value="s6079"> £60,000 - £79,999 <br>
<input type="checkbox" name="80plus" value="80plus"> £80,000 + <br>
</div>





<div class="talent_result_wrapper" data-experience="10yearexp" data-salary="s6079">
<ul>
<li><strong>Talent ID:  </strong>100007</li>
<li><strong>Resides:  </strong>London</li>
<li><strong>Salary Required:  </strong>£67000</li>
<li><strong>Experience:  </strong>10 Years </li>
<li><strong>Industy:  </strong>24</li>
<li><strong>Specialism:  </strong>24</li>
</ul>
<div>
<br>
<br> 

<div class="talent_result_wrapper" data-experience="5yearexp" data-salary="s3039">
<ul>
<li><strong>Talent ID:  </strong>100006</li>
<li><strong>Resides:      </strong>London</li>
<li><strong>Salary Required:  </strong>£35000</li>
<li><strong>Experience:  </strong>5 Years </li>
<li><strong>Industy:  </strong>24</li>
<li><strong>Specialism:  </strong>15</li>
</ul>
</div>

我正在尝试使用复选框来过滤掉结果。我已经在谷歌上搜索了好几天，但我对 jquery 还是很陌生，所以我真的很挣扎。 基本上，如果我勾选 5 年经验复选框，它应该显示第二个结果，同样，如果我单击 10 年它应该显示第一个结果，或者如果我有两个它应该显示两者。

同样，它需要与工资一起工作，所以如果我选中 30k -39k 框，它应该显示第二个结果，如果我选中 10 年和 30k - 39k 它应该什么都不显示。

这有意义吗？

我为此创建了一个小提琴：http://jsfiddle.net/MCam435/hpej8/

我一直在尝试重新创建类似于这个小提琴的东西，但我所能做的就是隐藏我页面的全部内容！ http://jsfiddle.net/mattball/d2v4Q/

有人可以帮忙吗？

Answer 1

您应该更改复选框的值

而不是1, 2, 3, 4

像value="10yearexp" 等那样做，然后我们可以这样做：

$(".search_box input[type=checkbox]").click( function(e){
    if($(this).val().length == 0){
        $(".talent_result_wrapper").show();
    } else {
        $(".talent_result_wrapper").hide();
        $("div[data-experience='" + $(this).val() + "']").show();
    }


    //added below shows all when nothing is checked!
    var n = $( "input:checked" ).length;
    if(n === 0){
        $(".talent_result_wrapper").show();
    }

});

如果由我来决定，我会进行很多更改，但无论如何都不是这样，上面的代码是不完整的，并且有更有效的方法来实现您的需求。

编辑：

更新了我的答案，它更简洁、更短+它在没有勾选任何内容时显示所有元素

DEMO

Answer 2

看看这个code。它没有完全完成。但是你会知道如何去做。

$('input[data-exp], input[data-sal]').on('click', function(){
    if(this.checked)
    {
        var exp = $(this).attr('data-exp');
        var sal = $(this).attr('data-sal');
        alert(exp + sal);
        $('.talent_result_wrapper').each(function(){
            if($(this).attr('data-experience') == exp || $(this).attr('data-salary') == sal)
            {
                $(this).show();
            }
            else
            {
                $(this).hide();
            }
        });
    }
});