根据复选框值过滤div(Filtering div's based on checkbox value)

根据复选框值过滤div(Filtering div's based on checkbox value)

我不打算发布我的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/

有人可以帮忙吗？

I wont bother with posting my jquery because I'm pretty sure it is all nonsense considering it doesn't cause any errors but still doesn't do anything...

<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>

I'm trying to use the checkboxes to filter out results. I've been googling this for days but i'm still pretty new to jquery so I'm really struggling. Basically if I tick the 5 years experience checkbox, it should show the second result, likewise if I click the 10 years one it should show the first, or if I have both it should show both.

Similarly it would need to work with the salary, so if I checked the 30k -39k box, it should show the second result, and if i checked the 10 years and 30k - 39k it should show nothing.

Does this make sense?

I've created a fiddle for this: http://jsfiddle.net/MCam435/hpej8/

I've been trying to recreate something similar to this fiddle, but all i've managed to do is hide the entire content of my page!! http://jsfiddle.net/mattball/d2v4Q/

Can anyone help please?

最满意答案

您应该更改复选框的值

而不是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

You should change the values of the checkboxes

instead of 1, 2, 3, 4

do it like value="10yearexp" etc. then we can do this:

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

If it was up to me I would have a lot of changes but its not so anyway the code above is incomplete and there is more efficient ways to achieve what you need.

Edit:

Updated my answer its cleaner and shorter + it shows all elements when nothing is ticked

DEMO