当选中所有空间复选框时，其他复选框将被取消选中和禁用
[英]When check all space checkbox other checkboxes to be unchecked and disabled
问题描述
I have a group of checkbox that indicates a house spaces, the last checkbox is for the house all space. 
我有一组表示房屋空间的复选框，最后一个复选框用于房屋的所有空间。 I want to disable and uncheck other checkboxes when I check "All space" checkbox. 当我选中“所有空间”复选框时，我想禁用并取消选中其他复选框。 what is its javascript code? 它的JavaScript代码是什么？
<html>
<label class="input-group-addon">
<input type="checkbox" value="1" id="rndr-lobby"
name="rndr-int-options" />
Lobby </label>
<label class="input-group-addon">
<input type="checkbox" value="1.4" id="rndr-room"
name="rndr-int-options" />
Room </label>
<label class="input-group-addon">
<input type="checkbox" value="1.5" id="rndr-living" name="rndr-int-options" />
Living </label>
<label class="input-group-addon">
<input type="checkbox" value="1.6" id="rndr-wc" name="rndr-int-options" />
WC </label>
<label class="input-group-addon">
<input type="checkbox" value="1.3" id="rndr-kitchen" name="rndr-int-options" />
Kitchen </label>
<label class="input-group-addon">
<input type="checkbox" value="1.3" id="rndr-office" name="rndr-int-options" />
Office </label>
<label class="input-group-addon">
<input type="checkbox" value="1.3" id="rndr-saloon" name="rndr-int-options" />
Saloon </label>
<label class="input-group-addon">
<input type="checkbox" value="1.3" id="rndr-all" name="rndr-int-options" onchange="AllCk();"/>
All sapce</label>
</html>
<script>
document.getElementById('rndr-all').onchange = function() {AllCk();}; document.getElementById（'rndr-all'）。onchange = function（）{AllCk（）;};
var AllCk = function () {
var RndrLob = document.getElementById("rndr-lobby"),
RndrRoo = document.getElementById("rndr-room"),
RndrLiv = document.getElementById("rndr-living"),
RndrWc = document.getElementById("rndr-wc"),
RndrKit = document.getElementById("rndr-kitchen"),
RndrOff = document.getElementById("rndr-office"),
RndrSal = document.getElementById("rndr-saloon"),
RndrAll = document.getElementById('rnder-all').checked;
if (RndrAll === true) {
RndrLob.disabled = true; RndrLob.checked = false;
RndrRoo.disabled = true; RndrRoo.checked = false;
RndrLiv.disabled = true; RndrLiv.checked = false;
RndrWc.disabled = true; RndrWc.checked = false;
RndrKit.disabled = true; RndrKit.checked = false;
RndrOff.disabled = true; RndrOff.checked = false;
RndrSal.disabled = true; RndrSal.checked = false;
RndrAll.disabled = true; RndrAll.checked = false;
}
};
</script>
2 个解决方案
解决方案1
0 已采纳 2017-07-22 13:46:59
function AllCk() {
if (document.querySelector('#rndr-all').checked) {
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].type == "checkbox") {
if (inputs[i].id != "rndr-all") {
inputs[i].checked = false;
inputs[i].disabled = true;
}
}
}
} else {
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].type == "checkbox") {
if (inputs[i].id != "rndr-all") {
inputs[i].disabled = false;
}
}
}
}
}
// By Jquery, Put it in your AllCk() function //通过Jquery，将其放在您的AllCk()函数中
$("input[id='rndr-all']").is(":checked") ?
$("input[name='rndr-int-options']").not("#rndr-all").prop('checked', false).prop('disabled', true) :
$("input[name='rndr-int-options']").not("#rndr-all").prop('disabled', false);
Hope it helps you ! 希望对您有帮助！
解决方案2
0 2017-07-22 13:47:04
Assuming the fact that All sapce checkbox is the last checkbox in the series, your AllCk() function should be like this: 假设“ 所有智能”复选框是该系列中的最后一个复选框，那么您的AllCk()函数应如下所示：
function AllCk(){
var spaces = document.getElementsByName("rndr-int-options");
for (var i = 0; i < spaces.length - 1; i++) {
if(spaces[i].checked)
spaces[i].checked = false;
}
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.