关于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>全选这个我看不懂该怎么添加完整，判断是否全部被选中
求大神补完~~~~跪求
展开
收起
2
条回答
写回答
写回答
-
-
第一个你代码就是错的，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('没有勾选所有商品') }2019-07-17 19:23:50赞同 展开评论 打赏
问答分类：
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
