☀【表单】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>

 

你可能感兴趣的:(checkbox)