javascript对html多选框进行动态排序

工具人苟下去

已于 2023-02-17 14:33:08 修改

阅读量395

点赞数 1

分类专栏：前端文章标签： html javascript

于 2022-07-19 16:23:26 首次发布

本文链接：https://blog.csdn.net/qq_34208250/article/details/125865901

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这是一个HTML页面，实现了动态排序的功能。用户可以点击水果名称旁边的框进行排序，选中的项会显示数字并按顺序排列。当用户点击提交按钮时，如果没有选择任何项，会提示至少选择一项。如果选择了项，则会输出排序后的结果。该代码主要涉及前端交互和事件处理。

摘要由CSDN通过智能技术生成

对几个选项动态排序

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>开发</title>

    <!-- <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> -->

</head>

<style>

    .checkbox_span {

        min-width: 20px;

        height: 20px;

        display: inline-block;

        vertical-align: middle;

        margin: 0 10px;

        background: #fff;

        border: 1px solid #a6a6a6;

        border-radius: 2px;

    }

    .checkbox_span_xuan {

        background: #2068FF !important;

        border: 1px solid #2068FF !important;

        min-width: 20px;

        height: 20px;

        line-height: 20px;

        border-radius: 2px;

        color: #fff;

        text-align: center;

    }

</style>



<body>

    <div>

        <div class="checkbox_info">

            <span id="pai_kuan_01" class="checkbox_span" onclick="selected_sorting(this.id);"></span>

            <span id="pai_text_01">香蕉</span>

        </div>

        <div class="checkbox_info">

            <span id="pai_kuan_02" class="checkbox_span" onclick="selected_sorting(this.id);"></span>

            <span id="pai_text_02">苹果</span>

        </div>

        <div class="checkbox_info">

            <span id="pai_kuan_03" class="checkbox_span" onclick="selected_sorting(this.id);"></span>

            <span id="pai_text_03">菠萝</span>

        </div>

        <div class="checkbox_info">

            <span id="pai_kuan_04" class="checkbox_span" onclick="selected_sorting(this.id);"></span>

            <span id="pai_text_04">草莓</span>

        </div>

    </div>

    <p><button onclick="tijiao();">提交</button></p>

</body>



</html>

<script>

    // 提交

    function tijiao() {

        var num = document.querySelectorAll("div.checkbox_info");

        var num_tmp = 0;

        var sorting_problem = '';

        for (var i = 1; i <= num.length; i++) {

            var pai_id = 'pai_kuan_0' + i;

            var if_value = document.getElementById(pai_id).innerHTML;

            // console.log(if_value);

            // 判断是否为空

            if (if_value) {

                // 有值，说明选中了

                var text_id = 'pai_text_0' + i;

                var if_text = document.getElementById(text_id).innerHTML;

                var last_tmp = if_value + '.' + if_text + ',';

                sorting_problem += last_tmp;

            }

        }

        if (sorting_problem == null || sorting_problem == "" || sorting_problem == undefined) {

            alert('至少选择一项');

            var href_id = "#sorting_problem";

            location.href = href_id;

            return false;

        }

        console.log(sorting_problem);

    }

    // 排序特效

    function selected_sorting(obj) {

        // console.log(obj);

        var num = document.querySelectorAll("div.checkbox_info");

        // 判断前面有多少个有值的

        var num_tmp = 0;

        for (var i = 1; i <= num.length; i++) {

            var pai_id = 'pai_kuan_0' + i;

            var if_value = document.getElementById(pai_id).innerHTML;

            if (if_value) {

                // console.log('循环每个选项'+ifvalue);

                num_tmp += 1;

            }

        }

        // console.log(num_tmp);

        //判断当前点击是否有值

        var obj_value = document.getElementById(obj).innerHTML;

        if (obj_value) {

            // console.log('当前点击有值');

            document.getElementById(obj).innerHTML = '';

            document.getElementById(obj).classList.remove("checkbox_span_xuan");

            for (var i = 1; i <= num.length; i++) {

                var pai_id = 'pai_kuan_0' + i;

                var if_value = document.getElementById(pai_id).innerHTML;

                // id值大于点击选项的全部-1

                if (if_value !== obj_value && if_value > obj_value) {

                    var auto_value = if_value - 1;

                    document.getElementById(pai_id).innerHTML = auto_value;

                }

            }

        } else {

            //没有值

            // console.log('当前点击没有值');

            var new_num_tmp = num_tmp + 1;

            document.getElementById(obj).innerHTML = new_num_tmp;

            document.getElementById(obj).classList.add("checkbox_span_xuan");

        }

    }

</script>