如何根据另一个复选框选择取消选中一个复选框?
How to make a checkbox unchecked based on another checkbox selection?
我的应用程序中有 6 个复选框。
<input type="checkbox" name="vehicle" id="vehicle1" value="one">one<br>
<input type="checkbox" name="vehicle" id="vehicle2" value="two">two<br>
<input type="checkbox" name="vehicle" id="vehicle3 value="three">three<br>
<input type="checkbox" name="vehicle" id="vehicle4" value="four">four<br>
<input type="checkbox" name="vehicle" id="vehicle5" value="five">five<br>
<input type="checkbox" name="vehicle" id="all" value="all">all<br>
我有这个 jquery 函数,如果单击 "all" 复选框,它会禁用所有其他复选框。
$("#all").change(function(){
var $inputs = $('input:checkbox')
if($(this).is(':checked')){
$inputs.not(this).prop('disabled',true);
} else {
$inputs.prop('disabled',false);
}
});
如果我 select 一个复选框而不是 "all" 复选框,我有下面的代码将禁用 "all" 复选框。
$("[type=checkbox]").click(function() {
if((this.value == "one") || (this.value == "two") || (this.value == "three") || (this.value == "four") || (this.value == "five")){
$( "#all" ).prop( 'disabled', true );
}
else{
$( "#all" ).prop( 'disabled', false );
}
});
我的问题是,如果我在 select 之后尝试取消选中一个复选框,这个 "all" 复选框仍然被禁用。我希望在取消选中任何复选框后启用它。你们能帮我解决这个问题吗?
您需要验证是否选中了任何复选框,因此请禁用 all
复选框,否则 enable
。
因此您可以使用 $(":checkbox:not(#all)")
选择器将事件附加到那些不同于 #all
的复选框,例如:
那么对于你必须验证所有 chekcbox
的条件,而不仅仅是当前单击的 $(":checkbox:not('#all'):checked").length > 0
。
$("#all").change(function() {
var $inputs = $('input:checkbox');
if ($(this).is(':checked')) {
$inputs.not(this).prop('disabled', true);
} else {
$inputs.prop('disabled', false);
}
});
$(":checkbox:not(#all)").click(function() {
if ($(":checkbox:not('#all'):checked").length > 0) {
$("#all").prop('disabled', true);
} else {
$("#all").prop('disabled', false);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="vehicle" id="vehicle1" value="one">one<br>
<input type="checkbox" name="vehicle" id="vehicle2" value="two">two<br>
<input type="checkbox" name="vehicle" id="vehicle3" value="three">three<br>
<input type="checkbox" name="vehicle" id="vehicle4" value="four">four<br>
<input type="checkbox" name="vehicle" id="vehicle5" value="five">five<br>
<input type="checkbox" name="vehicle" id="all" value="all">all<br>
缩短版本片段:
$(":checkbox").click(function() {
if ($(this).is("#all")) {
$(":checkbox:not('#all')").prop('disabled', $(this).is(':checked'));
} else {
$("#all").prop('disabled', $(":checkbox:not('#all'):checked").length);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="vehicle" id="vehicle1" value="one">one<br>
<input type="checkbox" name="vehicle" id="vehicle2" value="two">two<br>
<input type="checkbox" name="vehicle" id="vehicle3" value="three">three<br>
<input type="checkbox" name="vehicle" id="vehicle4" value="four">four<br>
<input type="checkbox" name="vehicle" id="vehicle5" value="five">five<br>
<input type="checkbox" name="vehicle" id="all" value="all">all<br>
循环您的输入框,如果所有框都未选中,启用所有复选框。
为此,我添加了一个检查器功能,用于检查是否所有复选框都未选中。如果所有都未选中,则启用最后一个复选框。
$("#all").change(function(){
var $inputs = $('input:checkbox')
if($(this).is(':checked')){
$inputs.not(this).prop('disabled',true);
}
else{
$inputs.prop('disabled',false);
}
});
$("[type=checkbox]").click(function() {
if((this.value == "one") || (this.value == "two") || (this.value == "three") || (this.value == "four") || (this.value == "five")){
$( "#all" ).prop( 'disabled', true );
}
else{
$( "#all" ).prop( 'disabled', false );
}
checker()
});
function checker(){
var flag=0;
$('input[type=checkbox]').each(function () {
if(this.checked && $(this).val()!='all'){
console.log($(this).val())
flag=1;
}
});
if(flag==0){
$( "#all" ).prop( 'disabled', false );
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<input type="checkbox" name="vehicle" id="vehicle1" value="one">one<br>
<input type="checkbox" name="vehicle" id="vehicle2" value="two">two<br>
<input type="checkbox" name="vehicle" id="vehicle3" value="three">three<br>
<input type="checkbox" name="vehicle" id="vehicle4" value="four">four<br>
<input type="checkbox" name="vehicle" id="vehicle5" value="five">five<br>
<input type="checkbox" name="vehicle" id="all" value="all">all<br>
没有 jQuery,纯 DOM 有事件委托。
var $$ = s => Array.from(document.querySelectorAll(s))
var $ = s => document.querySelector(s)
// listen to input event
document.body.addEventListener('input', function(e) {
var target = e.target;
var all;
// when input event
switch (true) {
// if all, then disable other inputs
case target.matches('input[name="vehicle"][value="all"]'):
$$('input[name="vehicle"]:not([value="all"])')
.forEach(
element => element.disabled = target.checked)
return false
case target.matches("input[name='vehicle']:not([value='all'])"):
$('input[name="vehicle"][value="all"]').disabled =
$('input[name="vehicle"]:checked');
return false;
}
})
<input type="checkbox" name="vehicle" id="vehicle1" value="one">one<br>
<input type="checkbox" name="vehicle" id="vehicle2" value="two">two<br>
<input type="checkbox" name="vehicle" id="vehicle3" value="three" />three<br>
<input type="checkbox" name="vehicle" id="vehicle4" value="four ">four<br>
<input type="checkbox" name="vehicle" id="vehicle5" value="five " />five<br>
<input type="checkbox" name="vehicle" id="all" value="all" />all<br>
我的应用程序中有 6 个复选框。
<input type="checkbox" name="vehicle" id="vehicle1" value="one">one<br>
<input type="checkbox" name="vehicle" id="vehicle2" value="two">two<br>
<input type="checkbox" name="vehicle" id="vehicle3 value="three">three<br>
<input type="checkbox" name="vehicle" id="vehicle4" value="four">four<br>
<input type="checkbox" name="vehicle" id="vehicle5" value="five">five<br>
<input type="checkbox" name="vehicle" id="all" value="all">all<br>
我有这个 jquery 函数,如果单击 "all" 复选框,它会禁用所有其他复选框。
$("#all").change(function(){
var $inputs = $('input:checkbox')
if($(this).is(':checked')){
$inputs.not(this).prop('disabled',true);
} else {
$inputs.prop('disabled',false);
}
});
如果我 select 一个复选框而不是 "all" 复选框,我有下面的代码将禁用 "all" 复选框。
$("[type=checkbox]").click(function() {
if((this.value == "one") || (this.value == "two") || (this.value == "three") || (this.value == "four") || (this.value == "five")){
$( "#all" ).prop( 'disabled', true );
}
else{
$( "#all" ).prop( 'disabled', false );
}
});
我的问题是,如果我在 select 之后尝试取消选中一个复选框,这个 "all" 复选框仍然被禁用。我希望在取消选中任何复选框后启用它。你们能帮我解决这个问题吗?
您需要验证是否选中了任何复选框,因此请禁用 all
复选框,否则 enable
。
因此您可以使用 $(":checkbox:not(#all)")
选择器将事件附加到那些不同于 #all
的复选框,例如:
那么对于你必须验证所有 chekcbox
的条件,而不仅仅是当前单击的 $(":checkbox:not('#all'):checked").length > 0
。
$("#all").change(function() {
var $inputs = $('input:checkbox');
if ($(this).is(':checked')) {
$inputs.not(this).prop('disabled', true);
} else {
$inputs.prop('disabled', false);
}
});
$(":checkbox:not(#all)").click(function() {
if ($(":checkbox:not('#all'):checked").length > 0) {
$("#all").prop('disabled', true);
} else {
$("#all").prop('disabled', false);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="vehicle" id="vehicle1" value="one">one<br>
<input type="checkbox" name="vehicle" id="vehicle2" value="two">two<br>
<input type="checkbox" name="vehicle" id="vehicle3" value="three">three<br>
<input type="checkbox" name="vehicle" id="vehicle4" value="four">four<br>
<input type="checkbox" name="vehicle" id="vehicle5" value="five">five<br>
<input type="checkbox" name="vehicle" id="all" value="all">all<br>
缩短版本片段:
$(":checkbox").click(function() {
if ($(this).is("#all")) {
$(":checkbox:not('#all')").prop('disabled', $(this).is(':checked'));
} else {
$("#all").prop('disabled', $(":checkbox:not('#all'):checked").length);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="vehicle" id="vehicle1" value="one">one<br>
<input type="checkbox" name="vehicle" id="vehicle2" value="two">two<br>
<input type="checkbox" name="vehicle" id="vehicle3" value="three">three<br>
<input type="checkbox" name="vehicle" id="vehicle4" value="four">four<br>
<input type="checkbox" name="vehicle" id="vehicle5" value="five">five<br>
<input type="checkbox" name="vehicle" id="all" value="all">all<br>
循环您的输入框,如果所有框都未选中,启用所有复选框。
为此,我添加了一个检查器功能,用于检查是否所有复选框都未选中。如果所有都未选中,则启用最后一个复选框。
$("#all").change(function(){
var $inputs = $('input:checkbox')
if($(this).is(':checked')){
$inputs.not(this).prop('disabled',true);
}
else{
$inputs.prop('disabled',false);
}
});
$("[type=checkbox]").click(function() {
if((this.value == "one") || (this.value == "two") || (this.value == "three") || (this.value == "four") || (this.value == "five")){
$( "#all" ).prop( 'disabled', true );
}
else{
$( "#all" ).prop( 'disabled', false );
}
checker()
});
function checker(){
var flag=0;
$('input[type=checkbox]').each(function () {
if(this.checked && $(this).val()!='all'){
console.log($(this).val())
flag=1;
}
});
if(flag==0){
$( "#all" ).prop( 'disabled', false );
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<input type="checkbox" name="vehicle" id="vehicle1" value="one">one<br>
<input type="checkbox" name="vehicle" id="vehicle2" value="two">two<br>
<input type="checkbox" name="vehicle" id="vehicle3" value="three">three<br>
<input type="checkbox" name="vehicle" id="vehicle4" value="four">four<br>
<input type="checkbox" name="vehicle" id="vehicle5" value="five">five<br>
<input type="checkbox" name="vehicle" id="all" value="all">all<br>
没有 jQuery,纯 DOM 有事件委托。
var $$ = s => Array.from(document.querySelectorAll(s))
var $ = s => document.querySelector(s)
// listen to input event
document.body.addEventListener('input', function(e) {
var target = e.target;
var all;
// when input event
switch (true) {
// if all, then disable other inputs
case target.matches('input[name="vehicle"][value="all"]'):
$$('input[name="vehicle"]:not([value="all"])')
.forEach(
element => element.disabled = target.checked)
return false
case target.matches("input[name='vehicle']:not([value='all'])"):
$('input[name="vehicle"][value="all"]').disabled =
$('input[name="vehicle"]:checked');
return false;
}
})
<input type="checkbox" name="vehicle" id="vehicle1" value="one">one<br>
<input type="checkbox" name="vehicle" id="vehicle2" value="two">two<br>
<input type="checkbox" name="vehicle" id="vehicle3" value="three" />three<br>
<input type="checkbox" name="vehicle" id="vehicle4" value="four ">four<br>
<input type="checkbox" name="vehicle" id="vehicle5" value="five " />five<br>
<input type="checkbox" name="vehicle" id="all" value="all" />all<br>