[英]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.