如何用jquery实现checkbox的全选、反选、取消反选，以及如何得到选中的checkbox的值

来源：互联网发布：mac os x10.11 编辑：程序博客网时间：2024/06/10 07:54

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
< head>
    <title></title>
    <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#all").click(function () {
                $("input[name='checkbox1']").each(function () {
                    $(this).attr("checked", true);
                    var cks = $(":checked");
                    var val = "";
                    for (var i = 0; i < cks.length; i++) {
                        val += cks[i].value;
                    }
                    $("#txt").val(val);
                });
            });
            $("#delAll").click(function () {
                $("input[name='checkbox1']").each(function () {
                    $(this).attr("checked", false);
                    $("#txt").val("");
                });
            });
            $("#antiAll").click(function () {
                $("input[name='checkbox1']").each(function () {
                    $(this).attr("checked", !this.checked);
                    var cks = $(":checked");
                    var val = "";
                    for (var i = 0; i < cks.length; i++) {
                        val += cks[i].value;
                    }
                    $("#txt").val(val);
                });
            });
            $("#txt").click(function () {
                var cks = $(":checked");
                var val = "";
                for (var i = 0; i < cks.length; i++) {
                    val += cks[i].value;
                }
                $("#txt").val(val);
            });
        });
    </script>
< /head>
< body>
< a href="javascript:;" id="all">全部选择</a><br/>
<a href="javascript:;" id="delAll">取消选择</a><br/>
<a href="javascript:;" id="antiAll">反向选择</a>
<p><input type="checkbox" value="1," name="checkbox1"/>A
<input type="checkbox" value="2," name="checkbox1"/> B