Question

这是我的代码：的的script.js

$(document).ready(function() {
  $('.checkbox_servers_list').click(function(){
    var checkedValues = $('.group-list:checkbox:checked').map(function() {
      return this.value;
    }).get();
    console.log(checkedValues);
      var check_hosts = ["192.168.33.50", "192.168.33.100"]; // This value will be dynamic via ajax call.
      for (each in check_hosts){
          $(".host-list:checkbox[value='"+check_hosts[each]+"']").attr("checked", true);
        }
  });

});

和HTML文件。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script type="text/javascript" src="script.js"></script>
</head>
<body>


 <div id="group-list-id" class="checkbox_servers_list"><div class="col-md-12">
   <input type="checkbox" value="all" name="checkbox" class="group-list" id="group-checkbox_0">
   <label for="group-checkbox_0">all</label>
 </div> <div class="col-md-12">
 <input type="checkbox" value="mumbai" name="checkbox" class="group-list" id="group-checkbox_1">
 <label for="group-checkbox_1">mumbai</label>
</div> <div class="col-md-12">
<input type="checkbox" value="okhla" name="checkbox" class="group-list" id="group-checkbox_2">
<label for="group-checkbox_2">okhla</label>
</div> <div class="col-md-12">
<input type="checkbox" value="ungrouped" name="checkbox" class="group-list" id="group-checkbox_3">
<label for="group-checkbox_3">ungrouped</label>
</div> <div class="col-md-12">
<input type="checkbox" value="vagrant1" name="checkbox" class="group-list" id="group-checkbox_4">  
<label for="group-checkbox_4">vagrant1</label>
</div>
<div class="col-md-12"> 
  <input type="checkbox" value="bangalore" name="checkbox" class="group-list" id="group-checkbox_5">
  <label for="group-checkbox_5">bangalore</label>
</div> 
<div class="col-md-12"> 
 <input type="checkbox" value="vagrant2" name="checkbox" class="group-list" id="group-checkbox_6">  
 <label for="group-checkbox_6">vagrant2</label>
</div>
</div>

<hr>

  <div id="host-list" class="checkbox_hosts_list">
    <div class="col-md-12">
      <input type="checkbox" value="192.168.33.50" name="host-checkbox" class="host-list" id="host-checkbox_0">
      <label for="host-checkbox_0">192.168.33.50</label>
    </div>
    <div class="col-md-12">
      <input type="checkbox" value="192.168.33.10" name="host-checkbox" class="host-list" id="host-checkbox_1">
      <label for="host-checkbox_1">192.168.33.10</label>
    </div>
    <div class="col-md-12">
      <input type="checkbox" value="192.168.1.57" name="host-checkbox" class="host-list" id="host-checkbox_2">

      <label for="host-checkbox_2">192.168.1.57</label>
    </div>
    <div class="col-md-12">
      <input type="checkbox" value="192.168.1.59" name="host-checkbox" class="host-list" id="host-checkbox_3">
      <label for="host-checkbox_3">192.168.1.59</label>
    </div>
    <div class="col-md-12">
      <input type="checkbox" value="192.168.33.100" name="host-checkbox" class="host-list" id="host-checkbox_4">
      <label for="host-checkbox_4">192.168.33.100</label>
    </div>
    <div class="col-md-12">
     <input type="checkbox" value="192.168.1.58" name="host-checkbox" class="host-list" id="host-checkbox_5">
     <label for="host-checkbox_5">192.168.1.58</label>
   </div> 

 </div>









</body>

</html>

我想要实现的是当我点击顶部的任何复选框时，底部的相应复选框应该被检查（正在发生）但是当我取消选中一个复选框时底部的顶部相应的复选框应该取消选中（这不会发生）。

我尝试在js函数的开头添加它。

    $(".host-list:checkbox").attr("checked", false);
    and 
$(".host-list").prop("checked", false);

但它甚至会停止执行第一个功能。

P.S：正在发挥作用的演示fiddle。

Answer 1

由于您有要检查的列表项，因此首先将所有项标记为未选中

$(document).ready(function() {
    $('.checkbox_servers_list').click(function(){
        var checkedValues = $('.group-list:checkbox:checked').map(function() {
            return this.value;
        }).get();
        console.log(checkedValues);
        var check_hosts = ["192.168.33.50", "192.168.33.100"]; // This value will be dynamic via ajax call.
        $(".host-list:checkbox").prop("checked", false);
        for (each in check_hosts){
            $(".host-list:checkbox[value='"+check_hosts[each]+"']").prop("checked", true);
        }
    });
});

Answer 2

请尝试取消选中：

$('.host-list').find('input').prop('checked',false);

更新：您应该检查您的点击功能，然后获取值，所以我在里面添加了条件。

    for (each in check_hosts) {
        if($(".host-list:checkbox[value='" + check_hosts[each] + "']").attr("checked")){
            $(".host-list:checkbox[value='" + check_hosts[each] + "']").attr("checked", false);
        }else {
            $(".host-list:checkbox[value='" + check_hosts[each] + "']").attr("checked", true);

        }
   }

在特定事件时选中/取消选中复选框

2 个答案: