js全选实现和判断是否有复选框选中的方法

JS全选的实现可以分为两个部分：全选和全不选。下面是具体的实现方法和示例说明：

一、全选/全不选

1.1 HTML代码

在HTML代码中需要添加一个全选/全不选的复选框，和其他需要操作的复选框：

<input type="checkbox" id="checkAll">全选/全不选
<input type="checkbox" class="checkItem">选项1
<input type="checkbox" class="checkItem">选项2
<input type="checkbox" class="checkItem">选项3

1.2 JS代码

// 获取全选/全不选的复选框和其他复选框
var checkAll = document.getElementById('checkAll');
var checkItems = document.getElementsByClassName('checkItem');

// 全选/全不选复选框的点击事件
checkAll.onclick = function() {
    // 遍历所有复选框，将其状态与全选/全不选复选框一致
    for (var i = 0; i < checkItems.length; i++) {
        checkItems[i].checked = this.checked;
    }
};

// 其他复选框的点击事件
for (var i = 0; i < checkItems.length; i++) {
    checkItems[i].onclick = function() {
        // 判断是否所有复选框都被选中，是则将全选/全不选复选框也选中，否则不选中
        checkAll.checked = true;
        for (var j = 0; j < checkItems.length; j++) {
            if (!checkItems[j].checked) {
                checkAll.checked = false;
                break;
            }
        }
    };
}

通过以上代码，实现了全选/全不选和其他复选框的关联，即全选/全不选框选中后，其他复选框全部选中或全不选，其他复选框选中/取消后，全选/全不选框的状态也会对应改变。

二、判断是否有复选框选中

在页面中，可能会有某些操作需要判断是否有复选框被选中了。下面提供两个示例：

2.1 示例一

在一个表单中，需要判断是否至少选择一个复选框：

<form action="" onsubmit="return checkForm();">
    <input type="checkbox" class="checkItem">复选框1
    <input type="checkbox" class="checkItem">复选框2
    <input type="checkbox" class="checkItem">复选框3
    <button type="submit">提交</button>
</form>

function checkForm() {
    // 获取所有复选框
    var checkItems = document.getElementsByClassName('checkItem');

    // 遍历所有复选框，判断是否至少有一个被选中
    for (var i = 0; i < checkItems.length; i++) {
        if (checkItems[i].checked) {
            return true;
        }
    }

    // 如果没有复选框被选中，则返回false，阻止表单提交
    alert('请至少选择一个复选框！');
    return false;
}

通过以上代码，通过遍历所有复选框，判断它们是否被选中，如果至少有一个被选中，则返回true，允许表单提交；否则弹出提示信息并返回false，阻止表单提交。

2.2 示例二

在一个商品列表中，需要计算已选商品的总价：

<div id="goods">
    <input type="checkbox" class="checkItem" data-price="10">商品1（价格：10元）
    <input type="checkbox" class="checkItem" data-price="20">商品2（价格：20元）
    <input type="checkbox" class="checkItem" data-price="30">商品3（价格：30元）
</div>
<button onclick="calculatePrice();">计算总价</button>
<p id="totalPrice">总价：0元</p>

function calculatePrice() {
    // 获取所有复选框
    var checkItems = document.getElementsByClassName('checkItem');

    // 遍历所有复选框，累加已选商品的价格
    var totalPrice = 0;
    for (var i = 0; i < checkItems.length; i++) {
        if (checkItems[i].checked) {
            var price = parseFloat(checkItems[i].getAttribute('data-price'));
            totalPrice += price;
        }
    }

    // 将总价显示在页面上
    document.getElementById('totalPrice').innerHTML = '总价：' + totalPrice + '元';
}

通过以上代码，通过遍历所有复选框，判断它们是否被选中，如果被选中则累加已选商品的价格，并将总价显示在页面上。这个示例中使用了data-*属性来储存商品价格，也可以使用其他方式储存商品价格。