您的位置：首页 > Web前端 > JQuery

蜗牛—JQuery学习之全选简单实现

2014-05-17 11:43 447 查看 

<!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 src="../../js/jquery-1.7.2.min.js"></script>

<script>

$(function(){
$("#all").change(function(){
if($(this).attr("checked")){
$("input[name='product']").attr("checked",true);

}
else{
$("input[name='product']").attr("checked",false);

}

});

});

</script>

</head>

<body><table border="0" cellspacing="0" cellpadding="0" class="bg">

 <form action="" method="post">

  <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="全选"  />

      全选</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>

  </form>

</table>

</body>

</html>
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航