开发者社区> 问答> 正文

关于jquery的收缩展开、完整全选问题

吴孟桥 2016-06-01 23:27:08 1157
<script type="text/javascript">
// 收缩展开效果
$(document).ready(function(){
   $("a.click").toggle( function() {
       $(this).parent().next("ul").show('fast');
   }, function() {
       $(this).parent().next("ul").hide('slow');
  });
});

</script>   

       <ul class="sortSub" id="sortSub">

               <li>
                   <a class="click"><span></span>相机配件</a>
                   <ul id="ul1">

                           <li><a href="../../list.html">支架</a></li>

                           <li><a href="../../list.html">机身附件</a></li>

                           <li><a href="../../list.html">清洁用品</a></li>

                           <li><a href="../../list.html">滤镜</a></li>

                           <li><a href="../../list.html">电池-充电器</a></li>

                           <li><a href="../../list.html">相机包</a></li>

                           <li><a href="../../list.html">镜头</a></li>

                           <li><a href="../../list.html">闪光灯</a></li>

                   </ul>
               </li>

               <li>
                   <a class="click"><span></span>手机数码配件</a>
                   <ul>

                           <li><a href="../../list.html">贴膜</a></li>

                           <li><a href="../../list.html">存储卡</a></li>

                           <li><a href="../../list.html">手机壳-保护壳</a></li>

                           <li><a href="../../list.html">数据线</a></li>

                           <li><a href="../../list.html">电池-充电器</a></li>

                           <li><a href="../../list.html">移动电源</a></li>

                           <li><a href="../../list.html">蓝牙耳机</a></li>

                           <li><a href="../../list.html">读卡器</a></li>

                           <li><a href="../../list.html">其他配件</a></li>


                   </ul>
               </li>

               <li>
                   <a class="click"><span></span>摄像摄影</a>
                   <ul>

                           <li><a href="../../list.html">单反相机</a></li>

                           <li><a href="../../list.html">单电-微单相机</a></li>

                           <li><a href="../../list.html">拍立得</a></li>

                           <li><a href="../../list.html">摄像机</a></li>

                           <li><a href="../../list.html">数码相机</a></li> 


                   </ul>
               </li>

               <li>
                   <a class="click"><span></span>数码影音</a>
                   <ul>

                           <li><a href="../../list.html">MP3-MP4随身听</a></li>

                           <li><a href="../../list.html">mini音响</a></li>

                           <li><a href="../../list.html">录音笔</a></li>

                           <li><a href="../../list.html">数码相框</a></li>

                           <li><a href="../../list.html">耳机-耳麦</a></li>

                           <li><a href="../../list.html">高清播放器</a></li>

                           <li><a href="../../list.html">麦克风-话筒</a></li>

                   </ul>
               </li>

               <li>
                   <a class="click"><span></span>其他电子</a>
                   <ul>

                           <li><a href="../../list.html">学习机</a></li>

                           <li><a href="../../list.html">对讲机</a></li>

                           <li><a href="../../list.html">收音机</a></li>

                           <li><a href="../../list.html">电子书</a></li>

                   </ul>
               </li>

       </ul>

这个总是点击一个展开链接,其他的就都一起展开或者收缩了。

  <script>
        $(function(){
    //单独选择某一个
    $("input[name='check_item']").click(function(){
            var index=$("input[name='check_item']").index(this);
            $("input[name='check_item']").eq(index).toggleClass("checked");//伪复选
    }); 
    //全选
    $("#check_all,#box_all").click(function(){
     $("input[name='check_item']").attr("checked",$(this).attr("checked"));
     $("input[name='check_item'],#check_all,#box_all").toggleClass("checked");
    });

});




$(function () { 
    //全选或全不选 
    $("#box_all").click(function(){    
        if(this.checked){    
            $("#list :checkbox").attr("checked", true);   
        }else{    
            $("#list :checkbox").attr("checked", false); 
        }    
     });
});  

function allchk(){ 
    var chknum = $("#list :checkbox").size();//选项总个数 
    var chk = 0; 
    $("#list :checkbox").each(function () {   
        if($(this).attr("checked")==true){ 
            chk++; 
        } 
    }); 
    if(chknum==chk){//全选 
        $("#box_all").attr("checked",true); 
    }else{//不全选 
        $("#box_all").attr("checked",false); 
    } 
}
     </script>            
    <section class="s-list cf" id="dataList">
            <div class="wrap">

                <form method="post" action="order.html"> 
                <div class="container">
                    <div class="cart clear">
                        <div class="shadow">
                        <table width="100%" border="0">
                            <tr>
                                <td width="85%">
                                  <h5 class="fl">购买到的产品</h5></li>
                                </td>
                                <td width="10%"> <input type="checkbox" class="checkbox"  name="check_all" id="check_all" > </td>
                            </tr>
                        </table>


                       <div class="c_list cb">
                        <ul>
                            <li>
                                <table>
                                    <tr>
                                        <td width="15%"><img src="images/cart_img.jpg" width="52" height="44"></td>
                                        <td width="65%">
                                            <p>新奇士脐橙,8斤,甜中带微</p>
                                            <p><span class="lse">¥198.00</span> <span class="pl15">数量:<input type="text" name="num" class="num"> 包</span></p>
                                        </td>
                                        <td width="10%" valign="middle"><a href="#" class="del">删除</a></td>
                                        <td width="10%"> <input type="checkbox" class="checkbox"  name="check_item" id="check_item"></td>
                                    </tr>
                                </table>
                              </li>

                              <li> 
                               <table>
                                    <tr>
                                        <td width="15%"><img src="images/cart_img.jpg" width="52" height="44"></td>
                                        <td width="65%">
                                            <p>新奇士脐橙,8斤,甜中带微</p>
                                            <p><span class="lse">¥198.00</span> <span class="pl15">数量:<input type="text" name="num" class="num"> 包</span></p>
                                        </td>
                                        <td width="10%" valign="middle"><a href="#" class="del">删除</a></td>
                                        <td width="10%"> <input type="checkbox" class="checkbox"  name="check_item" id="check_item"></td>
                                    </tr>
                                </table>
                                </li>

                                <li>
                                <table>
                                    <tr>
                                        <td width="15%"><img src="images/cart_img.jpg" width="52" height="44"></td>
                                        <td width="65%">
                                            <p>新奇士脐橙,8斤,甜中带微</p>
                                            <p><span class="lse">¥198.00</span> <span class="pl15">数量:<input type="text" name="num" class="num"> 包</span></p>
                                        </td>
                                        <td width="10%" valign="middle"><a href="#" class="del">删除</a></td>
                                        <td width="10%"> <input type="checkbox" class="checkbox"  name="check_item" id="check_item"></td>
                                    </tr>
                                </table>
                                </li>

                               <li>
                               <table>
                                    <tr>
                                        <td width="15%"><img src="images/cart_img.jpg" width="52" height="44"></td>
                                        <td width="65%">
                                            <p>新奇士脐橙,8斤,甜中带微</p>
                                            <p><span class="lse">¥198.00</span> <span class="pl15">数量:<input type="text" name="num" class="num"> 包</span></p>
                                        </td>
                                        <td width="10%" valign="middle"><a href="#" class="del">删除</a></td>
                                        <td width="10%"> <input type="checkbox" class="checkbox"  name="check_item" id="check_item"></td>
                                    </tr>
                                </table>
                                </li>
                                <li>
                                <table>
                                    <tr>
                                        <td width="15%"><img src="images/cart_img.jpg" width="52" height="44"></td>
                                        <td width="65%">
                                            <p>新奇士脐橙,8斤,甜中带微</p>
                                            <p><span class="lse">¥198.00</span> <span class="pl15">数量:<input type="text" name="num" class="num"> 包</span></p>
                                        </td>
                                        <td width="10%" valign="middle"><a href="#" class="del">删除</a></td>
                                        <td width="10%"> <input type="checkbox" class="checkbox"  name="check_item" id="check_item"></td>
                                    </tr>
                                </table>
                                </li>

                               <li>
                               <table>
                                    <tr>
                                        <td width="15%"><img src="images/cart_img.jpg" width="52" height="44"></td>
                                        <td width="65%">
                                            <p>新奇士脐橙,8斤,甜中带微</p>
                                            <p><span class="lse">¥198.00</span> <span class="pl15">数量:<input type="text" name="num" class="num"> 包</span></p>
                                        </td>
                                        <td width="10%" valign="middle"><a href="#" class="del">删除</a></td>
                                        <td width="10%"> <input type="checkbox" class="checkbox"  name="check_item" id="check_item"></td>
                                    </tr>
                                </table>
                                </li>
                        </ul>
                       </div>


                    </div>  
                    </div>
                </div>

                <div class="cart_bg">
                <table width="100%" border="0">
                    <tr>
                        <td width="3%"></td>
                        <td width="25%"><input type="checkbox" class="checkbox" id="box_all"> 全选</td>
                        <td width="49%">
                            <p> <span class="pl15">金额合计:</span><span class="ff6">¥198.00</span></p>
                        </td>
                        <td width="20%"><button class="submit">去结算</button></td>
                        <td width="3%"></td>
                    </tr>
                </table>
                </div> 


                </form>
            </div>
    </section>
全选这个我看不懂该怎么添加完整,判断是否全部被选中

求大神补完~~~~跪求
分享到
取消 提交回答
全部回答(2)
  • nothingfinal
    2019-07-17 19:23:50

    手机上完全无法看

    0 0
  • 吴孟桥
    2019-07-17 19:23:50

    第一个你代码就是错的,parent得到li,ul是在li下,你调用next是同辈元素

            $("a.click").click(function () {
                $(this).next().toggle('fast');
                $(this).parent().siblings().find('ul').hide('slow');
            });

    给列表容器增加id,判断下总个数和勾选总个数是否一致就好了

     <div class="c_list cb" id="list">
    
             if ($("#list :checkbox").length != $("#list :checkbox:checked").length) {
                alert('没有勾选所有商品')
            }
    0 0
添加回答