仅选中列表

Question

我有一个用户名循环：

<div id=woohoo class=hey_im_here>
  <input class="search" placeholder="Enter a name">
  <br><br>
  <?php
  $numbers = '12345';
  $unityResult =  getUnityEmail(); 
  $houseResult = getHouses();   
  $count = mysqli_num_rows($houseResult);
  for ($x=0;$x<$count;$x++){
    echo "<div id='memberList$x' class='membr' style='display:inline-block;vertical-align:top'>";
    echo "<fieldset class=fieldname style='display:inline'>";       
    if( $numbers[$x] == 1){ echo "<legend class=name_legend>u (red)</legend>"; }
    else if( $numbers[$x] == 2){ echo "<legend class=name_legend>n (purple)</legend>"; }
    else if( $numbers[$x] == 3){ echo "<legend class=name_legend>i (blue)</legend>"; }
    else if( $numbers[$x] == 4){ echo "<legend class=name_legend>t (green)</legend>"; }
    else{ echo "<legend class=name_legend>y (yellow)</legend>"; }
    echo "<ul class='list'>";
    echo "<li><input class='allHouses' id='allHouses' data-username='all' type='checkbox' name=uid[] value='all'> "
           . "<label for='allHouses'>All</label></li>";   
    while ($row_unity = mysqli_fetch_array($unityResult)) {

      if ($row_unity['fkhouseid'] == $numbers[$x]) {

        format_member_list_filters( $row_unity);
      }
    }
    echo "</ul>";
    echo "</fieldset>";
    echo "<br>";
    echo "</div>";
    mysqli_data_seek($unityResult, 0);
  } ?>
</div>

我收到的内容：

然后我想让用户通过点击“全部”来选择每个字母下的所有用户名。我如何使用jquery允许用户检查当前列表的所有复选框。这是我试过的：

$(".allHouses").click(function(){
  var checkboxes = $(this).closest('li').find(':checkbox').not($(this));
  checkboxes.prop('checked', $(this).is(':checked'));
}); 

Answer 1

您需要找到最接近的ul而不是li。

$(".allHouses").click(function(){
  var checkboxes =  $(this).closest('ul').find(':checkbox').not($(this));
  checkboxes.prop('checked', $(this).is(':checked'));
});

closest('li')将返回.allHouses的直接父级，因此无法找到其他复选框。

Answer 2

您可以使用parent和find。

$('#allHouses').on('change', function() {
  $(this).parent().parent('ul').find('input[type="checkbox"]').prop('checked', $(this).is(":checked"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="sample_list">
  <li>
    <input type="checkbox" id="allHouses" />
  </li>
  <li>
    <input type="checkbox" class="test" />
  </li>
  <li>
    <input type="checkbox" class="test" />
  </li>
  <li>
    <input type="checkbox" class="test" />
  </li>
</ul>