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();
            }
        });
    }
});

根据复选框值过滤div

2 个答案: