JQurey复选框全选/反选

最新推荐文章于 2022-07-20 23:20:46 发布

祁连山的野孩子

最新推荐文章于 2022-07-20 23:20:46 发布

阅读量351

点赞数 1

分类专栏： jqurey案列文章标签： jqurey checkbox

本文链接：https://blog.csdn.net/qq_17254307/article/details/53737872

版权

jqurey案列专栏收录该内容

9 篇文章 0 订阅

订阅专栏

这里写图片描述

HTML布局

<form action="">
            <input type="checkbox" name="items" value="篮球">篮球</input>
            <input type="checkbox" name="items" value="足球">足球</input>
            <input type="checkbox" name="items" value="排球">排球</input>
            <input type="checkbox" name="items" value="网球">网球</input>
            <br/>
            <input id="selectAll" type="button" value="全选"/>
            <input id="selectAllNo" type="button" value="全不选"/>
            <input id="invers" type="button" value="反选"/>
            <input id="submit" type="button" value="提交"/>
        </form>

JS

$(function(){
    //获取名称为items的所有checkbox
    var checkboxList = $('[name=items]:checkbox')
    //全选操作
    $("#selectAll").click(function(){

        checkboxList.attr('checked','true');

    });
    //全不选
    $("#selectAllNo").click(function(){

        checkboxList.attr('checked','false');

    });
    //反选
    $("#invers").click(function(){

        checkboxList.each(function(){
            this.checked = !this.checked;
        });

    });
    //提交选项
    $("#submit").click(function(){

        var checkedArr = new Array();

        checkboxList.each(function(){

            if(this.checked == true){
                checkedArr.push(this.value);
            }
        });
        alert(checkedArr.join('-'));
    });
});