復選框全選與全不選效果 ?

邏輯：復選框的checked屬性與復選框全選效果對應起來，全選復選框checked：true 時，全部復選框checked：true；

全選框checked：false 時，全部復選框checked：false

function selectAll(){var oInput = document.getElementsByName("cartCheckBox");for(var i=0;i<oInput.length;i++){oInput[i].checked=document.getElementById("allCheckBox").checked;} }

　　

根據單個復選框的選擇情況確定全選復選框是否被選

邏輯：全選復選框的checked屬性對應全部單選復選框的checked；當全部單選框的checked：true時，全選復選框checked：true；

當全部單選框的某一個復選框checked：false時，全選復選框checked：false。

function selectSingle(){var k=0;var oInput = document.getElementsByName("cartCheckBox");for(var i=0;i<oInput.length;i++){if(oInput[i].checked==false){k=1;break;}}if(k==0){document.getElementById("allCheckBox").checked=true;}else{document.getElementById("allCheckBox").checked=false;} }

　HTML代碼

1 <div id="content" style="width: 800px;height: 600px;margin: 10px auto 5px auto;clear: both;"> 2 <table width="100%" border="0" cellspacing="0" cellpadding="0" id="shopping"> 3 <form action="" method="post" name="myform"> 4 <tr> 5 <td class="title_1"><input id="allCheckBox" type="checkbox" value="" onclick="selectAll()" />全選</td> 6 <td class="title_2" colspan="2">店鋪寶貝</td> 7 <td class="title_3">獲積分</td> 8 <td class="title_4">單價（元）</td> 9 <td class="title_5">數量</td> 10 <td class="title_6">小計（元）</td> 11 <td class="title_7">操作</td> 12 </tr> 13 <tr> 14 <td colspan="8" class="line"></td> 15 </tr> 16 <tr> 17 <td colspan="8" class="shopInfo">店鋪：<a href="#">纖巧百媚時尚鞋坊</a> 賣家：<a href="#">纖巧百媚</a> <img src="images/taobao_relation.jpg" alt="relation" /></td> 18 </tr> 19 <tr id="product1"> 20 <td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product1" onclick="selectSingle()" /></td> 21 <td class="cart_td_2"><img src="images/taobao_cart_01.jpg" alt="shopping"/></td> 22 <td class="cart_td_3"><a href="#">日韓流行風時尚美眉最愛獨特米字拼圖金屬坡跟公主靴子黑色</a><br /> 23 顏色：棕色 尺碼：37<br /> 24 保障：<img src="images/taobao_icon_01.jpg" alt="icon" /></td> 25 <td class="cart_td_4">5</td> 26 <td class="cart_td_5">138.00</td> 27 <td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" onclick="changeNum('num_1','minus')" class="hand"/> <input id="num_1" type="text" value="1" class="num_input" readonly="readonly"/> <img src="images/taobao_adding.jpg" alt="add" onclick="changeNum('num_1','add')" class="hand"/></td> 28 <td class="cart_td_7"></td> 29 <td class="cart_td_8"><a href="javascript:deleteRow('product1');">刪除</a></td> 30 </tr> 31 32 <tr> 33 <td colspan="8" class="shopInfo">店鋪：<a href="#">香港我的美麗日記</a> 賣家：<a href="#">lokemick2009</a> <img src="images/taobao_relation.jpg" alt="relation" /></td> 34 </tr> 35 <tr id="product2"> 36 <td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product2" onclick="selectSingle()" /></td> 37 <td class="cart_td_2"><img src="images/taobao_cart_02.jpg" alt="shopping"/></td> 38 <td class="cart_td_3"><a href="#">chanel/香奈爾/香奈爾炫亮魅力唇膏3.5g</a><br /> 39 保障：<img src="images/taobao_icon_01.jpg" alt="icon" /> <img src="images/taobao_icon_02.jpg" alt="icon" /></td> 40 <td class="cart_td_4">12</td> 41 <td class="cart_td_5">265.00</td> 42 <td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" onclick="changeNum('num_2','minus')" class="hand"/> <input id="num_2" type="text" value="1" class="num_input" readonly="readonly"/> <img src="images/taobao_adding.jpg" alt="add" onclick="changeNum('num_2','add')" class="hand"/></td> 43 <td class="cart_td_7"></td> 44 <td class="cart_td_8"><a href="javascript:deleteRow('product2');">刪除</a></td> 45 </tr> 46 47 <tr> 48 <td colspan="8" class="shopInfo">店鋪：<a href="#">實體經營</a> 賣家：<a href="#">林顏店鋪</a> <img src="images/taobao_relation.jpg" alt="relation" /></td> 49 </tr> 50 <tr id="product3"> 51 <td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product3" onclick="selectSingle()"/></td> 52 <td class="cart_td_2"><img src="images/taobao_cart_03.jpg" alt="shopping"/></td> 53 <td class="cart_td_3"><a href="#">蝶妝海??藍清瀅粉底液10#（象牙白）</a><br /> 54 保障：<img src="images/taobao_icon_01.jpg" alt="icon" /> <img src="images/taobao_icon_02.jpg" alt="icon" /></td> 55 <td class="cart_td_4">3</td> 56 <td class="cart_td_5">85.00</td> 57 <td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" onclick="changeNum('num_3','minus')" class="hand"/> <input id="num_3" type="text" value="1" class="num_input" readonly="readonly"/> <img src="images/taobao_adding.jpg" alt="add" onclick="changeNum('num_3','add')" class="hand"/></td> 58 <td class="cart_td_7"></td> 59 <td class="cart_td_8"><a href="javascript:deleteRow('product3');">刪除</a></td> 60 </tr> 61 62 <tr> 63 <td colspan="8" class="shopInfo">店鋪：<a href="#">紅豆豆的小屋</a> 賣家：<a href="#">taobao豆豆</a> <img src="images/taobao_relation.jpg" alt="relation" /></td> 64 </tr> 65 <tr id="product4"> 66 <td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product4" onclick="selectSingle()" /></td> 67 <td class="cart_td_2"><img src="images/taobao_cart_04.jpg" alt="shopping"/></td> 68 <td class="cart_td_3"><a href="#">相宜促銷專供 大S推薦 最好用的LilyBell化妝棉</a><br /> 69 保障：<img src="images/taobao_icon_01.jpg" alt="icon" /></td> 70 <td class="cart_td_4">12</td> 71 <td class="cart_td_5">12.00</td> 72 <td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" onclick="changeNum('num_4','minus')" class="hand"/> <input id="num_4" type="text" value="2" class="num_input" readonly="readonly"/> <img src="images/taobao_adding.jpg" alt="add" onclick="changeNum('num_4','add')" class="hand"/></td> 73 <td class="cart_td_7"></td> 74 <td class="cart_td_8"><a href="javascript:deleteRow('product4');">刪除</a></td> 75 </tr> 76 77 <tr> 78 <td colspan="3"><a href="javascript:deleteSelectRow()"><img src="images/taobao_del.jpg" alt="delete"/></a></td> 79 <td colspan="5" class="shopend">商品總價（不含運費）：<label id="total" class="yellow"></label> 元<br /> 80 可獲積分 <label class="yellow" id="integral"></label> 點<br /> 81 <input name=" " type="image" src="images/taobao_subtn.jpg" /></td> 82 </tr> 83 </form> 84 </table> 85 <div style="text-align:center;"> 86 <p>來源:<a href="http://www.mycodes.net/" target="_blank">源碼之家</a></p> 87 </div> 88 </div>

?

轉載于:https://www.cnblogs.com/jgwz/p/6281661.html

總結

以上是生活随笔為你收集整理的复选框全选效果，根据单个复选框的选择情况确定全选复选框是否被选的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。