【JavaScript】复制选中列表

一个小例子,用JS实现全选、反选、复制选中列表。

代码:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript">
        onload = function () {
            // var cks = document.getElementsByName("a");
            
            var btnAll = document.getElementById("btnAll");
            btnAll.onclick = function () {
                var cks = document.getElementsByName("a");
                for (var i = 0; i < cks.length; i++) {
                    cks[i].checked = true;
                }
            };

            var btnExcept = document.getElementById("btnExcept");
            btnExcept.onclick = function () {
                var cks = document.getElementsByName("a");
                for (var i = 0; i < cks.length; i++) {
                    cks[i].checked = !cks[i].checked;
                }
            };

            var btnCopy = document.getElementById("btnCopy");
            btnCopy.onclick = function () {
                var arr = [];
                var cks = document.getElementsByName("a");
                for (var i = 0; i < cks.length; i++) {
                    if (cks[i].checked) {
                        // 如何获得后面的a标签?
                        var href = cks[i].nextSibling.href;
                        arr.push(href);
                        // 数组的push方法是将数据追加到数据结尾处

                    }
                }
                clipboardData.setData("text", arr.join("\r\n"));
            };
        };

    </script>
</head>
<body>
    <div>
        <input type="checkbox" name="a" value=" " /><a href="music1.mp3">歌曲1</a><br />
        <input type="checkbox" name="a" value=" " /><a href="music2.mp3">歌曲2</a><br />
        <input type="checkbox" name="a" value=" " /><a href="music3.mp3">歌曲3</a><br />
        <input type="checkbox" name="a" value=" " /><a href="music4.mp3">歌曲4</a><br />
        <input type="checkbox" name="a" value=" " /><a href="music5.mp3">歌曲5</a><br />
        <input type="checkbox" name="a" value=" " /><a href="music6.mp3">歌曲6</a><br />
        <input type="checkbox" name="a" value=" " /><a href="music7.mp3">歌曲7</a><br />
        <input type="checkbox" name="a" value=" " /><a href="music8.mp3">歌曲8</a><br />
        <hr />
        <input type="button" name="" value="全选" id="btnAll"/>
        <input type="button" name="" value="反选" id="btnExcept" />
        <input type="button" name="" value="复制选中项" id="btnCopy"/>
    </div>
</body>
</html>

效果:


猜你喜欢

转载自blog.csdn.net/sz15732624895/article/details/79374771