JQurey复选框全选/反选

来源：互联网发布：虾米音乐淘宝登陆不了编辑：程序博客网时间：2024/05/29 02:23

这里写图片描述

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('-'));    });});

0 0