☀【表单】checkbox

全选 / 全不选 / 反选

http://www.css88.com/
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div id="checked">    
        <input name="checkbox" value="checkbox1" id="checkbox1" type="checkbox">
        <input name="checkbox" value="checkbox2" id="checkbox2" type="checkbox">
        <input name="checkbox" value="checkbox3" id="checkbox3" type="checkbox">     
        <input name="checkbox" value="checkbox4" id="checkbox4" type="checkbox">  
        <input name="checkbox" value="checkbox5" id="checkbox5" type="checkbox">
    </div>
    <input name="button1" id="button1" value="全选" type="submit">
    <input name="button2" id="button2" value="全不选" type="submit">
    <input name="button3" id="button3" value="反选" type="submit">
    <input name="button4" id="button4" value="看看我选择了什么" type="submit">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script>
        (function ($) {
            $.fn.checkBox = function (state) {
                this.each(function () {
                    switch (state) {
                        case 'all':
                            $(this).attr("checked", true);
                            break;
                        case 'none':
                            $(this).attr("checked", false);
                            break;
                        case 'toggle':
                            $(this).attr("checked", !this.checked);
                            break;
                    }
                });
            };
            $.fn.checkedValue = function () {        
                var str = '';
                this.each(function () {
                    str += $(this).val() + ",";            
                })
                return str;
            };
        })(jQuery);

        $(function () {
            $("#button1").bind("click", function () {
                $("#checked input[type=checkbox]").checkBox("all");
            });
            $("#button2").bind("click", function () {
                $("#checked input[type=checkbox]").checkBox("none");
            });
            $("#button3").bind("click", function () {
                $("#checked input[type=checkbox]").checkBox("toggle");
            });
            $("#button4").bind("click", function () {
                alert($("#checked input[type=checkbox][checked]").checkedValue());
            });
        });
    </script>
</body>
</html>