js checkbox全選并將獲取值放到input里邊

2019-11-21 00:54:19

字體：大中小

來源：轉載

供稿：網友

<!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=gb2312" /> <title>無標題文檔</title> <script language=Javascript> var tem = ""; function checkAll(e,itemName,thisvalue) { tem= document.getElementById("arrayid").value; var aa=document.getElementsByName(itemName); var bb=document.getElementById('arrayid'); if(e.checked==true){ tem += thisvalue+","; } else{ tem = tem.replace(thisvalue+",",""); } bb.value=tem; for (var i=0; i<aa.length; i++) aa[i].checked = e.checked; } </script> </head> <body> <form id="form1" name="form1" method="post" action=""> <input type="checkbox" name="1001" id="1001" value="1001" onclick="checkAll(this,'mk1001','1001')" checked="checked" /> <label for="1000">復選1</label> <input name="mk1001" type="checkbox" id="mk1001" value="1" checked="checked" /> <input name="mk1001" type="checkbox" id="mk" value="2" checked="checked" /> <input name="mk1001" type="checkbox" id="mk2" value="3" checked="checked"/> <input name="mk1001" type="checkbox" id="mk3" value="4" checked="checked"/> <input name="mk1001" type="checkbox" id="mk4" value="5" checked="checked"/> <input name="mk1001" type="checkbox" id="mk5" value="6" checked="checked"/> <input name="mk1001" type="checkbox" id="mk6" value="7" checked="checked"/> <br> <input type="checkbox" name="1002" id="1002" value="1002" onclick="checkAll(this,'mk1002','1002')" /> <label for="1002">復選2</label> <input name="mk1002" type="checkbox" id="mk7" value="1" /> <input name="mk1002" type="checkbox" id="mk8" value="2" /> <input name="mk1002" type="checkbox" id="mk9" value="3" /> <input name="mk1002" type="checkbox" id="mk10" value="4" /> <input name="mk1002" type="checkbox" id="mk11" value="5" /> <input name="mk1002" type="checkbox" id="mk12" value="6" /> <input name="mk1002" type="checkbox" id="mk13" value="7" /> <br> <input type="checkbox" name="1003" id="1003" value="1003" onclick="checkAll(this,'mk1003','1003')" /> <label for="1003">復選3</label> <input name="mk1003" type="checkbox" id="mk14" value="1" /> <input name="mk1003" type="checkbox" id="mk15" value="2" /> <input name="mk1003" type="checkbox" id="mk16" value="3" /> <input name="mk1003" type="checkbox" id="mk17" value="4" /> <input name="mk1003" type="checkbox" id="mk18" value="5" /> <input name="mk1003" type="checkbox" id="mk19" value="6" /> <input name="mk1003" type="checkbox" id="mk20" value="7" /> <br> <input type="checkbox" name="1004" id="1004" value="1004" onclick="checkAll(this,'mk1004','1004')" /> <label for="1004">復選4</label> <input name="mk1004" type="checkbox" id="mk21" value="1" /> <input name="mk1004" type="checkbox" id="mk22" value="2" /> <input name="mk1004" type="checkbox" id="mk23" value="3" /> <input name="mk1004" type="checkbox" id="mk24" value="4" /> <input name="mk1004" type="checkbox" id="mk25" value="5" /> <input name="mk1004" type="checkbox" id="mk26" value="6" /> <input name="mk1004" type="checkbox" id="mk27" value="7" /> <br> 請把復選1、復選2、復選3、復選4的值傳到下面文本框中，中間以","分隔。<br> <input name="arrayid" type="text" id="arrayid" size="30" value="1001," /> <br> </form> </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上一篇：javascript 日期聯動選擇器 [其中的一些代碼值得學習]

下一篇：多瀏覽器兼容的獲取元素和鼠標的位置的js代碼