[英]Check/Uncheck of check-boxes upon certain events
这是我的代码： 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);
但它甚至停止执行第一个功能。
PS：演示捣鼓什么是工作的。
由于您有待检查的列表项，因此首先将所有标记为未选中
$(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);
更新：您应该检查您的click函数，然后获取值，所以在里面为我添加了一个条件。
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);
}
}
如果在该div中选中了所有子复选框，则选中/取消选中（“全选”复选框）
[英]Check/Uncheck (Select All checkbox) if all child check-boxes are selected in that div
如何根据用户选择动态更改多个复选框的编号？
[英]How to change the numbering of multiple check-boxes dynamically depending upon user selection?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.