程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 更多編程語言 >> 編程綜合問答 >> jquery-兩個JQuery問題,一個是收縮展開的代碼、一個是完整全選的代碼

jquery-兩個JQuery問題,一個是收縮展開的代碼、一個是完整全選的代碼

編輯:編程綜合問答
兩個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>
    全選這個我看不懂該怎麼添加完整,判斷是否全部被選中

    求大神補完~~~~跪求

最佳回答:


第一個你代碼就是錯的,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('沒有勾選所有商品')
        }
  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved