选中/取消选中某些事件的复选框

Check/Uncheck of check-boxes upon certain events

本文关键字：事件 复选框 取消 选中      更新时间：2023-09-26

这是我的代码：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);

但是它甚至停止第一特征的执行。

第S页：演示正在工作的内容。

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

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

尝试取消选中：

$('.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);
        }
   }
相关文章：