qinyi素材网
当前位置: 首页 > WEB教程 > 使用jQuery完成CheckBox的全选和反选演示

使用jQuery完成CheckBox的全选和反选演示

  时间: 2021-10-21   阅读:681
简要教程

在做网页项目的时候经常会遇到一些表单的填写,表单填写的时候自然会用到复选框。下面是一个简单的使用jQuery完成CheckBox的全选和反选功能的案例,希望能够帮到初学者。

使用方法

首先在HTML中先引入jquery.min.js

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>

HTML结构

<input type="checkbox" id="all"/>全选
<button id="invert">反选</button>
<br/><br/>
<input type="checkbox" name="webObj"/>jquery<br/>
<input type="checkbox" name="webObj"/>html<br/>
<input type="checkbox" name="webObj"/>css<br/>
<input type="checkbox" name="webObj"/>web<br/>

JavaScript代码

    // 全选
    $("#all").on('click', function () {
        $("input[name='webObj']").prop("checked", this.checked);
    });
    // 反选
    $("#invert").on('click', function () {
        var $subs = $("input[name='webObj']");
        $subs.each(function () {
            $(this).prop('checked', !$(this).prop('checked'));
        })
        $("#all").prop("checked", $subs.length == $subs.filter(":checked").length ? true : false);
    });
    // 选中所有的选项之后,全选自动勾选
    $("input[name='webObj']").on('click', function () {
        var $subs = $("input[name='webObj']");
        $("#all").prop("checked", $subs.length == $subs.filter(":checked").length ? true : false);
    });

功能详解:
全选:点击选中所有的复选框
反选:点击反选之后,已选中的变为不选中状态,不选中的变为选中状态。并且选项存在不选中状态时,全选的复选框不选中。
选项点击:每次点击选项时判断选中的数目和所有选项的数目是否相等,相等则自动勾选全选,不相同则取消勾选

上一篇: 下一篇: