我有一个带有多个复选框的HTML页面。
我需要一个名称为“全选”的复选框。当我选择此复选框时,HTML页面中的所有复选框都必须被选中。我该怎么做呢?
我有一个带有多个复选框的HTML页面。
我需要一个名称为“全选”的复选框。当我选择此复选框时,HTML页面中的所有复选框都必须被选中。我该怎么做呢?
当前回答
简单扼要:
jQuery -点击按钮或div或标签元素。勾选页面上的所有复选框。请记住,您必须调整:复选框,使其更具体。
jQuery("#My-Button").click(function() {
jQuery(':checkbox').each(function() {
if(this.checked == true) {
this.checked = false;
} else {
this.checked = true;
}
});
});
其他回答
使用jQuery:
// Listen for click on toggle checkbox $('#select-all').click(function(event) { if(this.checked) { // Iterate each checkbox $(':checkbox').each(function() { this.checked = true; }); } else { $(':checkbox').each(function() { this.checked = false; }); } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="checkbox" name="checkbox-1" id="checkbox-1" /> <input type="checkbox" name="checkbox-2" id="checkbox-2" /> <input type="checkbox" name="checkbox-3" id="checkbox-3" /> <!-- select all boxes --> <input type="checkbox" name="select-all" id="select-all" />
试试这个简单的JQuery:
$('#select-all').click(function(event) {
if (this.checked) {
$(':checkbox').prop('checked', true);
} else {
$(':checkbox').prop('checked', false);
}
});
下面的方法非常容易理解,你可以在几分钟内实现现有的表单
与Jquery,
$(document).ready(function() {
$('#check-all').click(function(){
$("input:checkbox").attr('checked', true);
});
$('#uncheck-all').click(function(){
$("input:checkbox").attr('checked', false);
});
});
以HTML形式放在下面的按钮
<a id="check-all" href="javascript:void(0);">check all</a>
<a id="uncheck-all" href="javascript:void(0);">uncheck all</a>
只需使用javascript,
<script type="text/javascript">
function checkAll(formname, checktoggle)
{
var checkboxes = new Array();
checkboxes = document[formname].getElementsByTagName('input');
for (var i=0; i<checkboxes.length; i++) {
if (checkboxes[i].type == 'checkbox') {
checkboxes[i].checked = checktoggle;
}
}
}
</script>
以HTML形式放在下面的按钮
<button onclick="javascript:checkAll('form3', true);" href="javascript:void();">check all</button>
<button onclick="javascript:checkAll('form3', false);" href="javascript:void();">uncheck all</button>
简单扼要:
jQuery -点击按钮或div或标签元素。勾选页面上的所有复选框。请记住,您必须调整:复选框,使其更具体。
jQuery("#My-Button").click(function() {
jQuery(':checkbox').each(function() {
if(this.checked == true) {
this.checked = false;
} else {
this.checked = true;
}
});
});
这就是它的作用,例如,如果你有5个复选框,你点击选中全部,它就会选中全部,现在如果你取消选中所有复选框可能是点击每5个复选框,当你取消选中最后一个复选框时,选中全部复选框也会被取消选中
$("#select-all").change(function(){
$(".allcheckbox").prop("checked", $(this).prop("checked"))
})
$(".allcheckbox").change(function(){
if($(this).prop("checked") == false){
$("#select-all").prop("checked", false)
}
if($(".allcheckbox:checked").length == $(".allcheckbox").length){
$("#select-all").prop("checked", true)
}
})