实例
----
小胖订餐
问题
1
：处理一级菜单，单击时收起，或者展开
（
1
）选择一级
checkbox
的方法：
div
的孩子
选择直接孩子：
$("div>")
或者
$("div").children()
选择
checkbox
：
$("input[type=checkbox]")
或者
$(":checkbox")
（
2
）找到子菜单：可以是
this
的
last
兄弟，可以是上级
div
的孩子，可以是
class
是
detail
的
元素。
（
3
）控制菜单显示或隐藏：原理：
display
：
block/none
.css("display","block");
或者
.css("display","none");
.show();
或者
.hide()
.removeClass("detail");
或者
.addClass("detail");
(4)
使用
toggleClass
对“
detail
”样式进行切换（注意：找元素时不能
再
用
class
取值为
detail
作为依据）
代码如下
：
$("div>input[type=checkbox]").click(function(){
var
bChecked
= $(this).attr("checked");
//this.checked;
if(
bChecked
){
//display:
block
//$(this).parent().children("div").css("display","block");
//$(this).parent().children("div").show();
$(this).parent().children("div").removeClass("detail");
}else{
//display:none
//$(this).parent().children("div").css("display","none");
//$(this).parent().children("div").hide();
$(this).parent().children("div").addClass("detail");
}
//$(this).parent().children("div").toggleClass("detail");
})
1
问题
2
：计算总价
方法：对所有选中的二级
checkbox
进行统计。
（
1
）挑选“被选中”的二级
checkbox
的方法
为了防止应用
toggleClass
后
detail
样式消失，建议从
tr
向下找
checkbox
。
（
2
）单价和数量的获取
<tr>
<td>
<input type="checkbox" name="LiangCai" >
拍黄瓜
</td>
<td>
￥
<span>5.00</span>
元
</td>
<td>
<input type="text">
</td>
</tr>
单价在
tr
下的
<span>5.00</span>
中，数量在
tr
下的
<input type=
”
text
”
>
中
。
（
3
）求和：
each
迭代
（
4
）将结果写在总价区域内。
function addTotal(){
//
计算总价格的函数
var fTotal = 0;
$("div.detail
:checked").each(function(){
//
对于选中了的复选项进行遍历
//
获取每一个的数量
var iNum = parseInt($(this).parents("tr").find("input[type=text]").val());
//
获取每一个的单价
var fPrice = parseFloat($(this).parents("tr").find("span").text());
fTotal = fTotal + iNum * fPrice;
});
$("#totalPrice").find("span").text(fTotal.toFixed(2));
}
注意：如果用
toggleClass()
实现切换效果，找子菜单的
checkbox
时，从
tr
向下找。
问题
3
：二级菜单的事件处理
（
1
）选中某个菜品时，默认将菜品数量设置为
1
，文本框可用，
光标置于文本框中。
（
2
）去掉某个菜品时，默认将菜品数量清空，文本框不可用。
依据：
checkbox
的状态。
2
var bChecked= $(this).attr("checked")
if(
bCh
ecked
){
$(this).parents("tr").find(":text").val(1);
$(this).parents("tr").find(":text").attr("disabled",false);
$(this).parents("tr").find(":text").focus();
}else{
$(this).parents("tr").find(":text").val("");
$(this).parents("tr").find(":text").attr(
"disabled",true);
}
以上代码可以利用条件表达式
、链式操作
进行简化：
$(this).parent().parent().find("input[type=text]").val(bChecked ? 1 :"")
.atrr("disabled",!bChecked)
.focus();
（
3
）重新计算总价。
（
4
）当菜品数量文本框发生变化时，重新计算总价。
方式一：事件分别处理
$("
tr :checkbox
").click(function(){
var
bChecked = this.checked;
$(this).parent().parent().find("input[type=text]").val(bChecked ? 1 :"")
.atrr("disabled",!bChecked)
.focus();
getTotalPrice();
})
$("input[type=text]").change(function(){
getTotalPrice();
//
计算总价格
});
方式二：用
trigger
触发事件
$("
tr :checkbox
").click(function(){
//tr.find(
"
:checkbox
"
)
var bChecked = this.checked;
3
$(this).parent().parent().find("input[type=text]").val(bChecked ? 1 :"")
.trigger("change")
/
/
统一
计算
价格
.atrr("disabled",!bChecked)
.focus();
})
$("input[
type=text]").change(function(){
getTotalPrice();
//
计算总价格
});
问题
4
：一级菜单被收起时，将子菜单的选择去掉
当一级菜单被收起时，
子菜单
checked
标记为
false
；菜品数量文本框取值置空；重新计算价
格。
$("div>input[type=checkbox]").click(function(){
if(!bChecked){//
未选中
$(this).parent(
).find("input[type=checkbox]").attr("checked",false);
$(this).parent().find("input[type=text]").val("");
getTotalPrice();
//
计算总价格
}
})
整体代码
$(function(){
//
加载页面完全后，统一设置输入文本框
$("input[type=text]").attr({
"disabled": true,//
文本框为
disable
"value": "
",
//
表示份数的
value
值为空
"maxlength":"2"
//
最都只能输入
2
位数
});
//
处理一级菜单，单击时收起，或者展开
$("div>
:checkbox
").click(function(){
4
$(this).parent().children("div").toggleClass("detail");
var bChecked = $(this).attr("checked");
//this.checked;
if(!bChecked){//
未选中
$(this).parent().find("input[type=checkbox]").attr("checked",false);
$(this).parent().find("input[type=text]").val("");
getTotalPrice();
//
计算总价格
}
})
//
处理二级菜单，计算
$("tr :checkbox").click(function(){
var bChecked = $(this).attr("
checked") //this.checked
$(this).parents("tr").find(":text").val(bChecked?1:"")
.trigger("change")
.attr("disabled",!bChecked)
.focus();
})
$(":text").change(function(){
getTotalPrice();
})
})
//
统计总价
function getTotalPrice(){
var
sum = 0;
$("tr :checked").each(function(){
//
统计所有被选中的二级
checkbox
//
找到单价
var price = parseFloat($(this).parents("tr").find("span").html());
//
找到数量
var num = parseInt($(this).parents("tr").find("input[type=text]").val()); //attr("value")
5