當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript实现复选框全选与全不选的效果
生活随笔
收集整理的這篇文章主要介紹了
JavaScript实现复选框全选与全不选的效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
//里面涉及到幾張圖片，有需要的可以聯系我要，直接私信我就行，每天在這個點都會上線，看到就回，或者從我的資料里面找我的聯系方式，收到之后會發給你們的
<!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>
<style type="text/css">
.bg{background-image: url(images/list_bg.gif);background-repeat: no-repeat;width: 730px;
}
td{text-align:center;
font-size:13px;
line-height:25px;
}
body{margin:0}
</style><script type="text/JavaScript">function check(){var oInput=document.getElementsByName("product");for (var i=0;i<oInput.length;i++)oInput[i].checked=document.getElementById("all").checked;}
</script>
</head><body><table border="0" cellspacing="0" cellpadding="0" class="bg"><tr><td style="height:40px;">?</td><td>?</td><td>?</td><td>?</td></tr><tr style="font-weight:bold;"><td><input id="all" type="checkbox" value="全選" οnclick="check();" />全選</td><td>商品圖片</td><td>商品名稱/出售者/聯系方式</td><td>價格</td></tr><tr><td colspan="4"><hr style="border:1px #CCCCCC dashed" /></td></tr><tr><td><input name="product" type="checkbox" value="1" /></td><td><img src="images/list0.jpg" alt="alt" /></td><td>杜比環繞，家庭影院必備，超真實享受<br />出售者：ling112233<br /><img src="images/online_pic.gif" alt="alt" /> ??<img src="images/list_tool_fav1.gif" alt="alt" /> 收藏</td><td>一口價<br />2833.0 </td></tr><tr><td colspan="4"><hr style="border:1px #CCCCCC dashed" /></td></tr><tr><td><input name="product" type="checkbox" value="2" /></td><td><img src="images/list1.jpg" alt="alt" /></td><td>NVDIA 9999GT 512MB 256bit極品顯卡，不容錯過<br />出售者：aipiaopiao110 <br /><img src="images/online_pic.gif" alt="alt" /> ??<img src="images/list_tool_fav1.gif" alt="alt" /> 收藏</td><td>一口價<br />6464.0 </td></tr><tr><td colspan="4"><hr style="border:1px #CCCCCC dashed" /></td></tr><tr><td><input name="product" type="checkbox" value="3" /></td><td><img src="images/list2.jpg" alt="alt" /></td><td>精品熱賣：高清晰，30寸等離子電視<br />出售者：陽光的掙扎 <br /><img src="images/online_pic.gif" alt="alt" /> ??<img src="images/list_tool_fav1.gif" alt="alt" /> 收藏</td><td>一口價<br />18888.0 </td></tr><tr><td colspan="4"><hr style="border:1px #CCCCCC dashed" /></td></tr><tr><td><input name="product" type="checkbox" value="4" /></td><td><img src="images/list3.jpg" alt="alt" /></td><td>Sony索尼家用最新款筆記本 <br />出售者：瘋狂的鏡無<br /><img src="images/online_pic.gif" alt="alt" /> ??<img src="images/list_tool_fav1.gif" alt="alt" /> 收藏</td><td>一口價<br />5889.0 </td></tr><tr><td colspan="4"><hr style="border:1px #CCCCCC dashed" /></td></tr>
</table></body>
</html>
總結
以上是生活随笔為你收集整理的JavaScript实现复选框全选与全不选的效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： oppo手机相机用不了怎么办
- 下一篇： 购物车的功能——JS源码