jquery(全选、反选、添加、删除、移动元素)

最新推荐文章于 2022-08-29 21:32:04 发布

原创最新推荐文章于 2022-08-29 21:32:04 发布 · 825 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

Web前端专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何通过JavaScript实现快递的全选与反选功能，包括清除已选快递、获取已选快递、移除已选快递及已选快递排序等功能。

/*全选/反选*/
function selectallexpressprovider(tbselectable) {
    var thisvalue = $(this).val();
    if (thisvalue == "全选") {
        $("input[type='checkbox']", "#" + tbselectable).attr("checked", true);
        $(this).val("反选");
    }
    else if (thisvalue == "反选") {
        $("input[type='checkbox']", "#" + tbselectable).attr("checked", false);
        $(this).val("全选");
    }
}

/*清除已选快递*/
function removeallexpressprovider(tbhasselect) {
$("#" + tbhasselect).children().children().remove();
}

/*获取已选快递*/
function get_selectableexpressprovider() {
    var context = $(this);
    var tbselectable = $("#tbselectable", context);
    var tbhasselectbody = $("#tbhasselectbody", context);

var selectableexpressprovider = $("input[type='checkbox']:checked", tbselectable); //可选快递
var selectedexpressprovider = $("input[type='radio']", tbhasselectbody); //已选快递

    if (selectableexpressprovider.length == 0) {
        alert("请选择快递!");
        return;
    }

    $(selectableexpressprovider).each(function (index, value) {
        var providerid = $(value).attr("value");
        var providername = $(value).attr("providername");
        var existexpressprovider = true;

        for (var i = 0; i < selectedexpressprovider.length; i++) {
            var hasselectexpressprovidervalue = $(selectedexpressprovider[i]).attr("value");
            if (providerid == hasselectexpressprovidervalue) {
                existexpressprovider = false;
            }
        }

        if (existexpressprovider) {
            $(tbhasselectbody).append("<tr id=" + providerid + " height=\"15\"><td><input type='radio' name='expressprovider' value ='" + providerid + "' /></td><td>" + providername + "</td></tr>");
        }
    });
}

/*移除已选快递*/
function remove_selectableexpressprovider() {
    var context = $(this);
    var tbselectable = $("#tbselectable", context);
    var tbhasselect = $("#tbhasselect", context);

var selectedexpressprovider = $("input[type='radio']:checked", tbhasselect); //已选快递

    if (selectedexpressprovider.length == 0) {
        alert("请选择快递!");
        return;
    }

    $(selectedexpressprovider).each(function (index, value) {
        $(value).parent().parent().remove();
    });
}

/*已选快递-排序*/
function sort_selectableexpressprovider(elem) {
var context = $(this);
var tbhasselect = $("#tbhasselect", context);

var expressproviders = $("input[type='radio']", tbhasselect);
var selectedexpressprovider = $("input[type='radio']:checked", tbhasselect); //已选快递

    if (selectedexpressprovider.length == 0) {
        alert("请选择快递!");
        return;
    }

    $(expressproviders).each(function (index, value) {
        var providerid = $(value).attr("value");
        var selectedexpressproviderid = $(selectedexpressprovider).attr("value");

        if (providerid == selectedexpressproviderid) {
            var valueprev = $(value).parent().parent().prev();
            var valuenext = $(value).parent().parent().next();
            var selectedexpressproviderparent = $(selectedexpressprovider).parent().parent();

            if (elem == "moveup") {
                $(valueprev).before(selectedexpressproviderparent);
            }
            else if (elem == "movedown") {
                $(valuenext).after(selectedexpressproviderparent);
            }
        }
    });
}