自定義的checkbox多選傳值定義

2024-09-05 12:22:31

字體：大中小

供稿：網(wǎng)友

自定義的checkbox多選傳值定義，美化版的CheckBox復(fù)選框，使用了圖片制作成復(fù)選框，全選之后，圖片狀態(tài)也要隨之改變，呈選擇狀。

<!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>checkbox多選傳值調(diào)試</title><script language="javascript" type="text/javascript">var dr=document.getElementsByTagName("div"),i,t="";function submit1(num,type){t="";var dri=dr[num].getElementsByTagName("input");for(i=0;i<dri.length;i++){if(dri[i].checked){if(type==0){//alert(dri[i].value); break;}else{t=t+dri[i].value+"&";}}}if(type==1) alert(t); document.getElementById("text").value = t;window.location.href='test.aspx'+'?value='+t;//這里我想把得到的值寫進xml，傳遞給頁面test.aspx}function CheckAll(form1,v) {for (var i=0;i<form1.elements.length;i++) {var e = form1.elements[i];if (e.type=='checkbox') e.checked = v; }} function myCheckbox(obj,thisobj){	var o = document.getElementById(obj);	if(o.checked)	{		thisobj.style.backgroundImage="url(/jscss/demoimg/201208/checkOff.JPG)";		o.checked = false;	}	else	{		thisobj.style.backgroundImage="url(/jscss/demoimg/201208/checkOn.JPG)";		o.checked = true;	}}</script><title></title></head><body><form action="" method="get" id="form1" name="form1"><div   id="gz4odve"   class="d0 mb"></div><div   id="kr5tnfg"   class="mb"><p>   <input type="checkbox" name="a"  value="a" id="c1" style="display:none;" />  <div style="width:22px; height:22px;background-image:url(/jscss/demoimg/201208/checkOff.JPG);" onclick="myCheckbox('c1',this);">a</div>   <input type="checkbox" name="b"  value="b" id="c2" style="display:none;" />  <div style="width:22px; height:22px;background-image:url(/jscss/demoimg/201208/checkOff.JPG);" onclick="myCheckbox('c2',this);">b</div>   <input type="checkbox" name="c"  value="c" id="c3" style="display:none;" />  <div style="width:22px; height:22px;background-image:url(/jscss/demoimg/201208/checkOff.JPG);" onclick="myCheckbox('c3',this);">c</div>   <input type="checkbox" name="d"  value="d" id="c4" style="display:none;" />  <div style="width:22px; height:22px;background-image:url(/jscss/demoimg/201208/checkOff.JPG);" onclick="myCheckbox('c4',this);">d</div>   <input type="checkbox" name="e"  value="e" id="c5" style="display:none;" />  <div style="width:22px; height:22px;background-image:url(/jscss/demoimg/201208/checkOff.JPG);" onclick="myCheckbox('c5',this);">e</div>   <input type="checkbox" name="f"  value="f" id="c6" style="display:none;" />  <div style="width:22px; height:22px;background-image:url(/jscss/demoimg/201208/checkOff.JPG);" onclick="myCheckbox('c6',this);">f</div>  </p><p><input type="checkbox" name="all" value="" onclick=CheckAll(this.form,this.checked)> 選擇所有</p><button type="button" onclick="submit1(1,1)" >提交</button><p><label for="textfield"></label><input type="text" name="text" id="text" /></p></div></form></body></html>

上一篇：用typeof查看數(shù)據(jù)類型

下一篇：屏幕上跳躍的小球