lpf8090y 2015-09-02 06:14 采纳率: 50%
浏览 1804
已采纳

两个JQuery问题,一个是收缩展开的代码、一个是完整全选的代码

 <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>
    全选这个我看不懂该怎么添加完整,判断是否全部被选中

    求大神补完~~~~跪求
  • 写回答

1条回答 默认 最新

  • 斯洛文尼亚旅游 2015-09-02 06:29
    关注

    第一个你代码就是错的,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('没有勾选所有商品')
            }
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 如何让企业微信机器人实现消息汇总整合
  • ¥50 关于#ui#的问题:做yolov8的ui界面出现的问题
  • ¥15 如何用Python爬取各高校教师公开的教育和工作经历
  • ¥15 TLE9879QXA40 电机驱动
  • ¥20 对于工程问题的非线性数学模型进行线性化
  • ¥15 Mirare PLUS 进行密钥认证?(详解)
  • ¥15 物体双站RCS和其组成阵列后的双站RCS关系验证
  • ¥20 想用ollama做一个自己的AI数据库
  • ¥15 关于qualoth编辑及缝合服装领子的问题解决方案探寻
  • ¥15 请问怎么才能复现这样的图呀