用JQuery实现全选与取消的两种简单方法

以下是使用JQuery实现全选与取消全选功能的两种简单方法。这些方法假设你有一个复选框用于表示全选（master checkbox），以及多个子复选框（slave checkboxes）需要基于全选复选框的状态来更新。

### 方法一：使用`.prop()`方法

HTML 示例：

<input type="checkbox" id="checkAll"> 全选
<br>
<input type="checkbox" class="item"> 项目1
<input type="checkbox" class="item"> 项目2
<input type="checkbox" class="item"> 项目3

JQuery 代码：

// 全选
$('#checkAll').change(function() {
    $('.item').prop('checked', this.checked);
});

// 取消全选（虽然通常不需要单独的取消全选按钮，但这里仅作演示）
// 假设有一个按钮或另一个复选框用于取消全选
$('#uncheckAll').click(function() {
    $('#checkAll').prop('checked', false);
    $('.item').prop('checked', false);
});

注意：在上面的代码中，我添加了一个假设的`#uncheckAll`元素来演示如何取消全选。但在实际应用中，通常不需要一个单独的取消全选操作，因为未选中全选框自然就会导致所有子复选框被取消选中。

### 方法二：使用`.each()`遍历子复选框

虽然`.prop()`方法已经足够简洁且高效，但这里还是提供一种使用`.each()`遍历子复选框的方法，以展示不同的实现方式。

JQuery 代码：

// 全选
$('#checkAll').change(function() {
    $('.item').each(function() {
        this.checked = $('#checkAll').is(':checked');
    });
});

// 取消全选（同样，这里仅作演示）
$('#uncheckAll').click(function() {
    $('#checkAll').prop('checked', false);
    $('.item').each(function() {
        this.checked = false;
    });
});

在这个方法中，我们使用了`.each()`来遍历所有的子复选框，并根据全选框的状态来更新它们。然而，对于简单的全选/取消全选功能，`.prop()`方法更为简洁和高效。

在实际应用中，推荐使用方法一，因为它既简洁又易于理解。