JAVASCRIPT之多选值排序

最新推荐文章于 2022-09-26 12:10:10 发布

煜楷

最新推荐文章于 2022-09-26 12:10:10 发布

阅读量510

点赞数 1

CC 4.0 BY-SA版权

分类专栏： WEB前端文章标签： JAVASCRIPT 多选值排序

本文链接：https://blog.youkuaiyun.com/netuser1937/article/details/54965273

WEB前端专栏收录该内容

114 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的多选框值排序的方法。当用户选择或取消选择某个选项时，该方法会自动将已选中的选项值进行排序并显示在一个文本框中。此功能适用于需要收集并按字母顺序排列用户选择项的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JAVASCRIPT之多选值排序</title>
</head>

<body>
<input name="multi[]" type="checkbox" value="a" onclick="multiselect(this)" />
A
<input name="multi[]" type="checkbox" value="b" onclick="multiselect(this)" />
B
<input name="multi[]" type="checkbox" value="c" onclick="multiselect(this)" />
C
<input name="multi[]" type="checkbox" value="d" onclick="multiselect(this)" />
D
<input type="text" id="answers" value="" />
<script language="javascript">
    function multiselect(obj){
        var ansobj = document.getElementById("answers");
        var selval = obj.value.toUpperCase();
        var ansval_arr = new Array();
        var ansval = '';
        ansval = ansobj.value;
        if(obj.checked){
            if(ansval == "undefined" || ansval == ''){
                ansval = ansval + selval;
            }else{
                ansval = ansval + ',' + selval;
            }
        }else{
            ansval_arr = ansval.split(',');
            for(var i = 0; i < ansval_arr.length; i++){
                if(ansval_arr[i] == selval){
                    ansval_arr.splice(i,1);
                }
            }
            ansval = ansval_arr.toString();
        }
        ansval = ansval.split(',').sort();
        ansobj.value = ansval;
    }
    </script>
</body>
</html>