jQuery复选框全选、反选

Html

Css

jQuery复选框 全选 反选 取消 选中输出等功能



    超实用的jQuery代码段1


    超实用的jQuery代码段2


    超实用的jQuery代码段3


    超实用的jQuery代码段4


    超实用的jQuery代码段5


    超实用的jQuery代码段6

* {
	margin:0;
	padding:0;
	list-style-type:none;
}
.mar20 {
	margin:20px;
	font:13.5px "Trebuchet MS",sans-serif;
}

$(document).ready(function() {

// 全选
    $("#allselect").click(function() {
        $(":checkbox").each(function() {
            $(this).prop("checked", true);
            $(this).next().css({
                "background-color": "blue",
                "color": "White"
            });
        });
    });

//反选
    $("#invert").click(function() {
        $(":checkbox").each(function() {
            if ($(this).prop("checked")) {
                $(this).prop("checked", false);
                $(this).next().css({
                    "background-color": "White",
                    "color": "black"
                });
            } else {
                $(this).prop("checked", true);
                $(this).next().css({
                    "background-color": "blue",
                    "color": "White"
                });
            }
        });
    });

//取消
    $("#cancel").click(function() {
        $(":checkbox").each(function() {
            $(this).prop("checked", false);
            $(this).next().css({
                "background-color": "White",
                "color": "black"
            });
        });
    });

// 所有复选(:checkbox)框点击事件
    $(":checkbox").click(function() {
        if ($(this).prop("checked")) {
            $(this).next().css({
                "background-color": "blue",
                "color": "White"
            });
        } else {
            $(this).next().css({
                "background-color": "White",
                "color": "black"
            });
        }
    });

// 输出
    $("#output").click(function() {
        $(":checkbox").each(function() {
            if ($(this).prop("checked")) {
                alert($(this).val());
            }
        });
    });

});

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

jQuery复选框全选、反选



代码描述：jQuery复选框全选反选取消选中输出等功能

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

袖~牙

相关代码