最基本的例子是: //获取DOM元素 var checkbox = document.querySelector('input')， button = document.querySelector('button'); //在按钮上绑定“cilck”事件 按钮。addEventListener(“点击”,toggleCheckbox); //当单击按钮时，切换复选框 函数toggleCheckbox () { 复选框。checkbox.checked = ! }; < input type = "复选框”> < / > <按钮切换复选框按钮>

这个很适合我。

   $("#checkall").click(function() {
       var fruits = $("input[name=fruits\\[\\]]");
        fruits.prop("checked", $(this).prop("checked"));
    });

这是你想要的另一种方式。

$(document).ready(function(){   
    $('#checkp').toggle(
        function () { 
            $('.check').attr('Checked','Checked'); 
        },
        function () { 
            $('.check').removeAttr('Checked'); 
        }
    );
});

您还可以通过执行以下操作来切换复选框。目前使用引导切换复选框。

<link href='https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css' rel='stylesheet'>
<script src='https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js'></script>

<input type='checkbox' id='toggleScheduler' name='toggleScheduler' data-toggle='toggle'  data-on='Enabled'  data-off='Disabled'

$("#toggleScheduler").bootstrapToggle('on'); // enable toggle checkbox
$("#toggleScheduler").bootstrapToggle('off'); // disable toggle checkbox

一个更好的方法和用户体验

$('.checkall').on('click', function() {
   var $checks  = $('checks');
   var $ckall = $(this);

    $.each($checks, function(){
        $(this).prop("checked", $ckall.prop('checked'));
    });
});

$('checks').on('click', function(e){
   $('.checkall').prop('checked', false);
});

在某些条件下，复选框应自行更新。尝试点击“#选择所有团队成员”，然后取消一些项目，并再次单击选择全部。你可以看到不一致。为了防止它，可以使用以下技巧:

  var checkBoxes = $('input[name=recipients\\[\\]]');
  $('#select-all-teammembers').click(function() {
    checkBoxes.prop("checked", !checkBoxes.prop("checked"));
    $(this).prop("checked", checkBoxes.is(':checked'));
  }); 

顺便说一下，所有DOM-object复选框都应该像上面描述的那样缓存。