一个小例子,用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>
效果: