selectAll—part II

最新推荐文章于 2024-07-03 19:23:56 发布

liugang0605

最新推荐文章于 2024-07-03 19:23:56 发布

阅读量366

点赞数

CC 4.0 BY-SA版权

分类专栏： js jquery 文章标签： js jquery dom

本文链接：https://blog.youkuaiyun.com/power8988/article/details/74943218

js 同时被 2 个专栏收录

113 篇文章

订阅专栏

jquery

11 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的全选功能。通过监听全选框的状态改变来控制多个复选框的选择状态，并且当部分复选框被手动更改状态时能够自动更新全选框的状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前写过一个全选的，以下是从
http://blog.youkuaiyun.com/fcc0429/article/details/74931807
摘抄的布局；

<div id="formdiv">
    <input type="checkbox" name="checkoption">篮球<p>
    <input type="checkbox" name="checkoption">足球
    <p>
        <input type="checkbox" name="checkoption">网球
    <p>
        <input type="checkbox" name="checkoption">台球
    <p>
        <input type="checkbox" id="selectAll">
        <label for="selectAll">全选</label>
</div>

这次使用jquery来写

$(
        $inputItem = $("input[name='checkoption']"),
        $selectAll = $("#selectAll"),
        $selectAll.click(function () {
            $inputItem.each(function () {
                $(this).prop("checked", $selectAll.prop("checked"))
            })
        }),
        $("#formdiv").delegate($inputItem, "click", function () {
            $inputItem.each(function () {        $inputChecked=$("input[name='checkoption']:checked").length;
                if($inputChecked===$inputItem.length){
                    $selectAll.prop("checked", true)
                }
                else {
                    $selectAll.prop("checked", false)
                }
            })
        })
    )