JS批量勾选拿值复制

69想给他那个没有节操的网站弄个批量勾选复制链接的功能,(迅雷批量下载你懂的) 我就顺手写了一段,实现的功能是可以全选反选单选多选并复制已选的内容,复制功能仅支持IE,非IE浏览器的复制需要FLASH支持,略麻烦,在此略过.
首先这个JS可以剖尸为这几个部分:

  1. 一键全选或取消
  2. 获取checkbox的已选项
  3. 赋到另一个textarea或者input中,
  4. 然后复制这个textarea的值

这是代码

一.JS部分

function checkAll(name)//全选
{
var el = document.getElementsByTagName('input');
var len = el.length;
for(var i=0; i<len; i++)
{
if((el[i].type=="checkbox") && (el[i].name==name))
{
el[i].checked = true;
}
}
}
function clearAll(name)//反选
{
var el = document.getElementsByTagName('input');
var len = el.length;
for(var i=0; i<len; i++)
{
if((el[i].type=="checkbox") && (el[i].name==name))
{
el[i].checked = false;
}
}
}
function getChecked() {//获取checkbox已选项
var result = '';
var form = document.getElementById('getStart');
if(typeof form.xhd.length != 'undefined') {
for(var i=0; i<form.xhd.length; i++) {
if(form.xhd[i].checked) {
result += form.xhd[i].value + ' ';
}
}
} else {
if(form.xhd_type.checked) {
result += form.xhd_type.value + ' ';
}
}
if(result == '') {
document.getElementById('result').innerHTML ='';
} else {
document.getElementById('result').innerHTML = result;
}
}
function copyTo(theField,isalert)//复制
{
var obj=document.getElementById(theField);
if(obj!=null)
{
var clipBoardContent=obj.value;
obj.select();
window.clipboardData.setData("Text",clipBoardContent);
if(isalert!=false)
alert("DONE!");
}
else
{
alert("ERROR!");
}
}

二.HMTL部分

<form id="getStart" name="getStart">
<div>
<li> <input type="checkbox" name="test" value="" onclick="if(this.checked==false) { clearAll('xhd');getChecked(); } else { checkAll('xhd');getChecked(); }"/>全选/取消</li>
<li> <input type="checkbox" name="xhd" value="123" onclick="getChecked();" />链接123</li>
<li> <input type="checkbox" name="xhd" value="456" onclick="getChecked();" />链接456</li>
<li> <input type="checkbox" name="xhd" value="890" onclick="getChecked();" />链接890</li>
<li> <input type="checkbox" name="xhd" value="XXX" onclick="getChecked();" />链接XXX</li>
</div>
<div>
<textarea id="result" name="result" value="还未选择"></textarea> <button onclick="javascript:copyTo('result',true);">复制</button>
</div>
</form>

这是DEMO

  • 全选/取消
  • 链接123
  • 链接456
  • 链接890
  • 链接XXX
  • LIKE OR SHARE IT:

    admin发表于Code目录下,标签为,转载请保留链接

    TOP DOWN
    发表评论

    您必须 [ 登录 ] 才能发表留言!

    1. 沙 发 619影视

      沙发 :v5:

      四月 9, 2013 16:30:13
    2. 板 凳 SEO博客

      沙发 :v5:

      四月 9, 2013 16:30:25
    3. 地 板 张书杨

      没有更新说明?

      四月 9, 2013 17:06:42
    4. 地 毯 张书杨

      错了 是另一篇文章…

      四月 9, 2013 17:08:20
    5. 地 面 airoschou

      额,只支持IE呀? :koubi:

      四月 9, 2013 17:53:53
    6. 地 下 xsinger

      很high quality

      四月 9, 2013 20:22:46
    7. 7 楼 郑永

      技术稳,纯支持。

      四月 9, 2013 20:34:15
    8. 8 楼 一点点

      适合懒人用,一点全点……

      四月 10, 2013 02:46:39
    9. 9 楼 夜枫

      技术女,真可怕….尤其是像介样的….

      四月 10, 2013 10:07:16
    10. 10 楼 阿邙

      额 我刚也在研究这个。。。

      四月 10, 2013 14:19:21
      • 阿邙

        @阿邙 不过我弄的是jquery的。
        你这里提交评论的时候经常提交失败回到首页是咋滴了?

        1001室 四月 10, 2013 14:20:55
    11. 11 楼 婴儿游泳池

      不知道作甚用的,路过还是留名

      四月 10, 2013 14:43:14
    12. 12 楼 郑永

      这篇没发现。。

      四月 20, 2013 23:48:16