如何在选中一个复选框并单击按钮并获得值时选中所有复选框？

<input type="checkbox" class="checkbox" value="1">复选框1
<input type="checkbox" class="checkbox" value="2">复选框2
<input type="checkbox" class="checkbox" value="3">复选框3
<input type="checkbox" class="checkbox" value="4">复选框4

<button id="select-all-btn">全选</button>

$(document).ready(function() {
  // 目标复选框的点击事件处理程序
  $('.checkbox').on('click', function() {
    var isChecked = $(this).prop('checked'); // 获取目标复选框的选中状态

    // 遍历所有复选框元素，设置它们的选中状态与目标复选框相同
    $('.checkbox').each(function() {
      $(this).prop('checked', isChecked);
    });
  });

  // 按钮的点击事件处理程序
  $('#select-all-btn').on('click', function() {
    var isChecked = $('.checkbox').first().prop('checked'); // 获取第一个复选框的选中状态

    // 遍历所有复选框元素，设置它们的选中状态与第一个复选框相同
    $('.checkbox').each(function() {
      $(this).prop('checked', isChecked);
    });
  });
});