如果选中一个复选框,如何取消选中所有复选框?
How to uncheck all checkboxes, if one checkbox checked?
我有一组复选框,如下所示:
<label class="checkbox-inline">
<input type="checkbox" id="" value="1"> information
</label>
<label class="checkbox-inline">
<input type="checkbox" id="" value="2"> information
</label>
<label class="checkbox-inline">
<input type="checkbox" id="" value="3"> information
</label>
<label class="checkbox-inline">
<input type="checkbox" id="" value="4"> any
</label>
用户可以使用这些复选框进行选择。但是,如果用户选择 "any" 复选框,那么我需要取消选择所有其他选择。
我试过类似这样的方法,但它对我不起作用。
$('.checkbox-inline').click(function(){
$("input[type='checkbox']").attr('checked', false);
$(this).attr('checked', true);
})
谁能告诉我如何在 jquery 中执行此操作?
注意: 我正在为我的复选框使用动态生成的 HTML。
嗨,我编辑了我的答案,
有趣的是,我们大多数人都关注标签的点击,但我们试图捕捉的是复选框的点击事件@.@
我通过修改你的代码完成了这项工作:
<label class="checkbox-inline">
<input class ="checkbox1" type="checkbox" id="" value = "1" > information
</label>
<label class="checkbox-inline">
<input class ="checkbox1" type="checkbox" id="" value = "2"> information
</label>
<label class="checkbox-inline">
<input class ="checkbox1" type="checkbox" id="" value = "3"> information
</label>
<label class="checkbox-inline">
<input class ="checkbox1" type="checkbox" id="" value = "4"> any
</label>
$('.checkbox1').click(function(){
$("input[type='checkbox']").removeAttr('checked');
$(this).prop('checked', true);
})
我为复选框添加了单独的 class 并捕获其点击事件。
有用!! :P
编辑:
如果"any"复选框有特殊逻辑,
$('.checkbox1').click(function(){
if ($(this).val() != 4 && $("input[value=4]").is(":checked"))
return false;
// Check if any was checked
if ($(this).val() == 4)
$("input[value!=4]").removeAttr('checked');
//$(this).prop('checked', true);
})
两种情景被困。
1.如果选中了任何复选框,则取消选中其他复选框
2.不允许勾选其他复选框,如果有的话
P.S 我重用了@Alex 的回答中的一些代码:D
试试这个,它满足你的要求
$(document).on("change", "input", function() {
if ($("input[value=4]").is(":checked")) {
$("input[value!=4]").attr("checked", false);
}
});
$(document).ready(function() {
for (i = 1; i < 4; i++) {
$("#container").append("<label class='checkbox-inline'> <input type='checkbox' id='' value='" + i + "'>information</label>")
}
$("#container").append("<label class='checkbox-inline'> <input type='checkbox' id='' value='4'>any</label>");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container"></div>
您可以使用此 jquery 代码,其中 input_id 将是您的复选框的 ID。
$(document).on('click', "#input_id :checkbox", function() {
if ($(this).is(':checked')) {
$("#input_id :checkbox").prop('checked', false);
$(this).prop('checked', true);
}
})
定义一个id
到任何checkbox
,像这样:
<label class="checkbox-inline">
<input type="checkbox" id="" value="1"> information
</label>
<label class="checkbox-inline">
<input type="checkbox" id="" value="2"> information
</label>
<label class="checkbox-inline">
<input type="checkbox" id="" value="3"> information
</label>
<label class="checkbox-inline">
<input type="checkbox" id="any-checkbox" value="4"> any
</label>
我建议这样做是因为利用它是第四个事实并不是一个好主意。如果以后在它前面再加一个checkbox,那么它就不再是第四个了。
//We use .on to tackle with the dynamic nature of the HTML
$( "body" ).on( "change", ".checkbox-inline > input[type=checkbox]", function() {
if ($(this).attr("id") === "any-checkbox") { //Any checkbox tick
if ($(this).prop("checked")) { //User checked any
//Other checkboxes are unchecked
$(".checkbox-inline > input[type=checkbox]:not(#any-checkbox)").prop("checked", false)
}
} else { //Other checkbox tick
if ($(this).prop("checked")) {//User checked another checkbox
//Any checkbox is unchecked
$("#any-checkbox").prop("checked", false);
}
}
});
编辑:根据评论,我已经解决了多个组的问题,如下所示:
<label class="checkbox-inline">
<input type="checkbox" id="" name="hairColor" value="1"> information
</label>
<label class="checkbox-inline">
<input type="checkbox" id="" name="hairColor" value="2"> information
</label>
<label class="checkbox-inline">
<input type="checkbox" id="" name="hairColor" value="3"> information
</label>
<label class="checkbox-inline">
<input type="checkbox" id="hairColor" name="hairColor" value="4" class="any"> any
</label>
<br>
<label class="checkbox-inline">
<input type="checkbox" id="" name="eyeColor" value="1"> eyeColor
</label>
<label class="checkbox-inline">
<input type="checkbox" id="" name="eyeColor" value="2"> eyeColor
</label>
<label class="checkbox-inline">
<input type="checkbox" id="" name="eyeColor" value="3"> eyeColor
</label>
<label class="checkbox-inline">
<input type="checkbox" id="eyeColor" name="eyeColor" class="any" value="4"> any
</label>
//We use .on to tackle with the dynamic nature of the HTML
$( "body" ).on( "change", ".checkbox-inline > input[type=checkbox]", function() {
if ($(this).hasClass("any")) { //Any checkbox tick
if ($(this).prop("checked")) { //User checked any
//Other checkboxes are unchecked
$(".checkbox-inline > input[type=checkbox][name=" + $(this).attr("name") + "]:not(.any)").prop("checked", false)
}
} else { //Other checkbox tick
if ($(this).prop("checked")) {//User checked another checkbox
//Any checkbox is unchecked
$("[name=" + $(this).attr("name") + "].any").prop("checked", false);
}
}
});
我有一组复选框,如下所示:
<label class="checkbox-inline">
<input type="checkbox" id="" value="1"> information
</label>
<label class="checkbox-inline">
<input type="checkbox" id="" value="2"> information
</label>
<label class="checkbox-inline">
<input type="checkbox" id="" value="3"> information
</label>
<label class="checkbox-inline">
<input type="checkbox" id="" value="4"> any
</label>
用户可以使用这些复选框进行选择。但是,如果用户选择 "any" 复选框,那么我需要取消选择所有其他选择。
我试过类似这样的方法,但它对我不起作用。
$('.checkbox-inline').click(function(){
$("input[type='checkbox']").attr('checked', false);
$(this).attr('checked', true);
})
谁能告诉我如何在 jquery 中执行此操作?
注意: 我正在为我的复选框使用动态生成的 HTML。
嗨,我编辑了我的答案,
有趣的是,我们大多数人都关注标签的点击,但我们试图捕捉的是复选框的点击事件@.@
我通过修改你的代码完成了这项工作:
<label class="checkbox-inline">
<input class ="checkbox1" type="checkbox" id="" value = "1" > information
</label>
<label class="checkbox-inline">
<input class ="checkbox1" type="checkbox" id="" value = "2"> information
</label>
<label class="checkbox-inline">
<input class ="checkbox1" type="checkbox" id="" value = "3"> information
</label>
<label class="checkbox-inline">
<input class ="checkbox1" type="checkbox" id="" value = "4"> any
</label>
$('.checkbox1').click(function(){
$("input[type='checkbox']").removeAttr('checked');
$(this).prop('checked', true);
})
我为复选框添加了单独的 class 并捕获其点击事件。 有用!! :P
编辑: 如果"any"复选框有特殊逻辑,
$('.checkbox1').click(function(){
if ($(this).val() != 4 && $("input[value=4]").is(":checked"))
return false;
// Check if any was checked
if ($(this).val() == 4)
$("input[value!=4]").removeAttr('checked');
//$(this).prop('checked', true);
})
两种情景被困。 1.如果选中了任何复选框,则取消选中其他复选框 2.不允许勾选其他复选框,如果有的话
P.S 我重用了@Alex 的回答中的一些代码:D
试试这个,它满足你的要求
$(document).on("change", "input", function() {
if ($("input[value=4]").is(":checked")) {
$("input[value!=4]").attr("checked", false);
}
});
$(document).ready(function() {
for (i = 1; i < 4; i++) {
$("#container").append("<label class='checkbox-inline'> <input type='checkbox' id='' value='" + i + "'>information</label>")
}
$("#container").append("<label class='checkbox-inline'> <input type='checkbox' id='' value='4'>any</label>");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container"></div>
您可以使用此 jquery 代码,其中 input_id 将是您的复选框的 ID。
$(document).on('click', "#input_id :checkbox", function() {
if ($(this).is(':checked')) {
$("#input_id :checkbox").prop('checked', false);
$(this).prop('checked', true);
}
})
定义一个id
到任何checkbox
,像这样:
<label class="checkbox-inline">
<input type="checkbox" id="" value="1"> information
</label>
<label class="checkbox-inline">
<input type="checkbox" id="" value="2"> information
</label>
<label class="checkbox-inline">
<input type="checkbox" id="" value="3"> information
</label>
<label class="checkbox-inline">
<input type="checkbox" id="any-checkbox" value="4"> any
</label>
我建议这样做是因为利用它是第四个事实并不是一个好主意。如果以后在它前面再加一个checkbox,那么它就不再是第四个了。
//We use .on to tackle with the dynamic nature of the HTML
$( "body" ).on( "change", ".checkbox-inline > input[type=checkbox]", function() {
if ($(this).attr("id") === "any-checkbox") { //Any checkbox tick
if ($(this).prop("checked")) { //User checked any
//Other checkboxes are unchecked
$(".checkbox-inline > input[type=checkbox]:not(#any-checkbox)").prop("checked", false)
}
} else { //Other checkbox tick
if ($(this).prop("checked")) {//User checked another checkbox
//Any checkbox is unchecked
$("#any-checkbox").prop("checked", false);
}
}
});
编辑:根据评论,我已经解决了多个组的问题,如下所示:
<label class="checkbox-inline">
<input type="checkbox" id="" name="hairColor" value="1"> information
</label>
<label class="checkbox-inline">
<input type="checkbox" id="" name="hairColor" value="2"> information
</label>
<label class="checkbox-inline">
<input type="checkbox" id="" name="hairColor" value="3"> information
</label>
<label class="checkbox-inline">
<input type="checkbox" id="hairColor" name="hairColor" value="4" class="any"> any
</label>
<br>
<label class="checkbox-inline">
<input type="checkbox" id="" name="eyeColor" value="1"> eyeColor
</label>
<label class="checkbox-inline">
<input type="checkbox" id="" name="eyeColor" value="2"> eyeColor
</label>
<label class="checkbox-inline">
<input type="checkbox" id="" name="eyeColor" value="3"> eyeColor
</label>
<label class="checkbox-inline">
<input type="checkbox" id="eyeColor" name="eyeColor" class="any" value="4"> any
</label>
//We use .on to tackle with the dynamic nature of the HTML
$( "body" ).on( "change", ".checkbox-inline > input[type=checkbox]", function() {
if ($(this).hasClass("any")) { //Any checkbox tick
if ($(this).prop("checked")) { //User checked any
//Other checkboxes are unchecked
$(".checkbox-inline > input[type=checkbox][name=" + $(this).attr("name") + "]:not(.any)").prop("checked", false)
}
} else { //Other checkbox tick
if ($(this).prop("checked")) {//User checked another checkbox
//Any checkbox is unchecked
$("[name=" + $(this).attr("name") + "].any").prop("checked", false);
}
}
});