jQuery过滤器，检查所有复选框值

Question

在另一个问题中@Deadpool 的帮助下，我设法组合了一种根据复选框值过滤掉 div 结果的方法。

HTML

            <div id="search_section">

                <h3>Candidate Experience</h3>

                <div class="search_box_exp">
                    <input type="checkbox" name="3year" value="3yearexp"> 3+ Years <br>
                    <input type="checkbox" name="5year" value="5yearexp"> 5+ Years <br>
                    <input type="checkbox" name="7year" value="7yearexp"> 7+ Years <br>
                    <input type="checkbox" name="10year" value="10yearexp"> 10+ Years <br>
                </div>

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

                <div class="search_box_sal">
                    <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="s80plus"> £80,000 + <br>
                </div>
            </div>


<br>
<br>
<div style="display: block;" class="talent_result_wrapper" data-experience="5yearexp" data-salary="s29">
      <div class="talent_result_header">
        <span class="talent_result_head">ID: </span>100006
      </div>
        <ul>
          <li><strong>Resides:  </strong>Redditch</li>
          <li><strong>Salary Required:  </strong>£29000</li>
          <li><strong>Experience:  </strong>2 Years </li>
          <li><strong>Industy:  </strong>10</li>
          <li><strong>Specialism:  </strong>10</li>
      </ul></div>
<br>
<br>
<div style="display: block;" class="talent_result_wrapper" data-experience="10yearexp" data-salary="s6079">
      <div class="talent_result_header">
        <span class="talent_result_head">ID: </span>100007
      </div>
        <ul>
          <li><strong>Resides:  </strong>London</li>
          <li><strong>Salary Required:  </strong>£67000</li>
          <li><strong>Experience:  </strong>4 Years </li>
          <li><strong>Industy:  </strong>24</li>
          <li><strong>Specialism:  </strong>24</li>
      </ul></div>   

JQUERY

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

    var n = $( "input:checked" ).length;
    if(n === 0){
        $(".talent_result_wrapper").show();
    }

});

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

            var n = $( "input:checked" ).length;
            if(n === 0){
            $(".talent_result_wrapper").show();
            }
    })
});

我有这个小提琴来展示它：http://jsfiddle.net/MCam435/qnvxK/4/

我现在要做的是让它查看多个复选框值，例如，如果我点击 5 年和 10 年，它应该显示两个 div。薪水也是如此，所以应该看经验和薪水领域。目前它只查看最后一个复选框。

Answer 1

我能想到的最简单的方法是：

// finding all inputs of type="checkbox" within the '#search_section' element,
// binding a function to the 'change' event
$('#search_section input[type="checkbox"]').change(function(e){

    // caching the 'this' node (since we're using it more than once):
    var self = this;

    // finding all div elements with a 'data-experience' attribute that's
    // equal to the value of the un/checked checkbox
    // showing/hiding that/those element(s) depending on whether checkbox
    // is checked or not
    $('div[data-experience="' + self.value + '"]').toggle(self.checked);

// triggering the change event to show/hide the relevant div elements
// based on the initial state of the checkboxes
}).change();

JS Fiddle demo.

参考资料：

• Attribute-equals ([attribute="value"]) selector。
• change()。
• toggle()。

Answer 2

你想改变这一行

$("div[data-experience='" + $(this).val() + "']").show();

访问所有复选框状态。

$(".search_box_exp input[type=checkbox]").each(function(){
    if( $(this).is(":checked") ) {
        $("div[data-experience='" + $(this).val() + "']").show();
    }
});

与其他复选框列表相同。

$(".search_box_sal input[type=checkbox]").each(function(){
    if( $(this).is(":checked") ) {
        $("div[data-experience='" + $(this).val() + "']").show();
    }
});