我有一个带有多个复选框的HTML页面。

我需要一个名称为“全选”的复选框。当我选择此复选框时,HTML页面中的所有复选框都必须被选中。我该怎么做呢?


当前回答

下面的方法非常容易理解,你可以在几分钟内实现现有的表单

与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>

其他回答

$(document).ready(function() {
                $(document).on(' change', 'input[name="check_all"]', function() {
                    $('.cb').prop("checked", this.checked);
                });
            });

稍微改变的版本,检查和取消尊重

$('#select-all').click(function(event) {
        var $that = $(this);
        $(':checkbox').each(function() {
            this.checked = $that.is(':checked');
        });
    });

其实很简单:

const selectAllCheckboxes = () => {
  const checkboxes = document.querySelectorAll('input[type=checkbox]');
  checkboxes.forEach((cb) => { cb.checked = true; });
}

下面的方法非常容易理解,你可以在几分钟内实现现有的表单

与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>

html

<input class='all' type='checkbox'> All
<input class='item' type='checkbox' value='1'> 1
<input class='item' type='checkbox' value='2'> 2
<input class='item' type='checkbox' value='3'> 3

javascript

$(':checkbox.all').change(function(){
  $(':checkbox.item').prop('checked', this.checked);
});