zoukankan      html  css  js  c++  java
  • 复选框全选效果,根据单个复选框的选择情况确定全选复选框是否被选

    复选框全选与全不选效果  

    逻辑:复选框的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=" 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>
  • 相关阅读:
    Minecraft 1.12.2/1.14.4 Mod开发笔记——搭建环境
    Minecraft 1.12.2 Mod开发笔记
    浅谈莫比乌斯反演
    卡迈克尔数
    一些可能会有用的东西(持续更新)
    emacs配置
    CSPS 2020游记
    浅谈KMP
    Atcoder AGC052
    乌班图操作指令(持续更新)
  • 原文地址:https://www.cnblogs.com/jgwz/p/6281661.html
Copyright © 2011-2022 走看看