全选效果（勾选、取消）

最新推荐文章于 2023-06-18 11:03:41 发布

Tangayi

最新推荐文章于 2023-06-18 11:03:41 发布

阅读量350

点赞数

本文链接：https://blog.csdn.net/Tangayi/article/details/81085818

版权

<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>
</head>

<body><table border="0" cellspacing="0" cellpadding="0" class="bg">
 <form action="" method="post">
  <tr>
    <td style="height:40px;">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr style="font-weight:bold;">
    <td><input id="all" type="checkbox" value="全选"  onclick="show()"/>全选</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" /> &nbsp;&nbsp;
	<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" /> &nbsp;&nbsp;
	<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" /> &nbsp;&nbsp;
	<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" /> &nbsp;&nbsp;
	<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>
    </form>
</table>

<script type="text/javascript">
	
	function show(){
		var id1 = document.querySelector("#all");
		var name2 = document.querySelectorAll("[name='product']");
		for(var i = 0;i<name2.length;i++){
			if(id1.checked == true){
				name2[i].checked =true; 
				/*id1.checked = name2[i].checked*/
			}else{
				name2[i].checked =false; 
			}
			
		}
	}
	
	
</script>

</body>

Tangayi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
全选效果（勾选、取消）

&lt;title&gt;全选效果&lt;/title&gt;&lt;style type="text/css"&gt;.bg{ background-image: url(images/list_bg.gif); background-repeat: no-repeat; width: 730px;}td{text-align:center;font-size:13px;li...
复制链接

扫一扫