Jquery实现账单全部选中和部分选中管理

在做购物车系统是我们往往会遇到这样一个需求,在点击全选框时我们要将全部的单个账单都选中;在单个选中账单时,如果账单全部被选中则需要全选框处于选中状态,若没有全部被选中则全选框处于没选中状态;

以下是在学习过程的实现代码:

<script type="text/javascript">
$(document).ready(function(){
//删除当前行商品元素
// $(".del").click(function () {
// $(this).parent().parent().remove();
// });
/* $(".del").on("click",function () {
$(this).parent().parent().remove();
}); */

$(".del").live("click",function () {
$(this).parent().parent().remove();
});

$(".add").click(function () {
//创建新节点
var $newPro = $("<tr>"
+ "<td>"
+ "<input name=‘‘ type=‘checkbox‘ value=‘‘ />"
+ "</td>"
+ "<td>"
+ "<img src=‘../image/computer.jpg‘ class=‘products‘ />"
+ "<a href=‘#‘>联想笔记本电脑</a>"
+ "</td>"
+ "<td>¥3189元</td>"
+ "<td>"
+ "<img src=‘../image/subtraction.gif‘ width=‘20‘ height=‘20‘ />"
+ "<input type=‘text‘ class=‘quantity‘ value=‘1‘ />"
+ "<img src=‘../image/add.gif‘ width=‘20‘ height=‘20‘ />"
+ "</td>"
+ "<td><a href=‘#‘ class=‘del‘>删除</a></td>"
+ "</tr>");
//在table中插入新建节点
$("table").append($newPro);
});
$("button").bind({
click:function(){},
mouseover:function(){ },
mouseout:function(){ }
});

$("th input[type=‘checkbox‘]").on("click",function(){
  if($(this).attr("checked")=="checked"){//点击全选复选框 全选所有商品
    var $selectAll = $("tr td input[type=‘checkbox‘]");
    //alert($selectAll.length);
    $selectAll.each(function(){
    $(this).attr("checked","checked");
  });
}else{//点击全选复选框 取消全选所有商品
  var $selectAll = $("tr td input[type=‘checkbox‘]");
  //alert($selectAll.length);
 $selectAll.each(function(){
  $(this).attr("checked",false);
 });
}
});
 $("tr td input[type=‘checkbox‘]").live("click",function (){//给所有的checkbox多选框绑定click事件
  var i =0;//声明一个变量记录选中的个数
  $("tr td input[type=‘checkbox‘]").each(function(){
    if($(this).attr("checked")=="checked"){//如果选中记录数+1
      i=i+1;
    };
  });
  if(i==$("tr td input[type=‘checkbox‘]").length){//如果全部选中则将全选按钮设为选中状态
    $("th input[type=‘checkbox‘]").attr("checked","checked");
  }else{
    $("th input[type=‘checkbox‘]").attr("checked",false);
  };
 });
}); 
</script>

实现效果:

点击全选----则商品内容全部选中      取消选中全选则全部取消    代码天蓝色部分效果如图

点击添加按钮可以添加预先设置好的元素及代码蓝色部分   效果如图

依次选中单个账单,当账单全部被选中时,全选按钮被设为选中状态,代码红色部分,若没全部选中时则状态不变  效果如图

时间: 05-14

Jquery实现账单全部选中和部分选中管理的相关文章

jquery操作select(取值,设置选中)

最近工作中总出现select 和 option问题,整理一下,内容大部分源于网络资料 一.基础取值问题 例如<select class="selector"></select> 1.设置value为pxx的项选中 $(".selector").val("pxx"); 2.设置text为pxx的项选中 $(".selector").find("option[text='pxx']").

JQuery判断radio是否选中并获取选中值的示例代码

这篇文章主要介绍了JQuery判断radio是否选中并获取选中值的方法,代码很简单,但很实用,需要的朋友可以参考下 其他对radio操作功能,以后在添加.直接上代码,别忘记引用JQuery包 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 <!DOCTYPE html PUBLIC "

jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关

jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关 获取一组radio被选中项的值var item = $('input[@name=items][@checked]').val();获取select被选中项的文本var item = $("select[@name=items] option[@selected]").text();select下拉框的第二个元素为当前选中值$('#select_id'

EasyUI带选择框的DataGrid实现点击行&quot;不选中或取消选中&quot;的解决方法。

1 var IsCheckFlag = true; //标示是否是勾选复选框选中行的,true - 是 , false - 否 2 $("#dg").datagrid({ 3 rownumbers:true, 4 url: 'LeadsData.ashx?o=list', 5 method:'get', 6 fit: true, 7 striped:true, 8 pagination: true, 9 fitColumns: true, 10 checkOnSelect: false

MFC CheckBox选中或取消选中

CheckBox控件选中或取消选中时: void CFlapLaneDlg::OnBnClickedAutoPolling() { // TODO: 在此添加控件通知处理程序代码 CButton* pBtn = (CButton*)GetDlgItem(IDC_AUTO_POLLING); int state = pBtn->GetCheck(); if (state == 1) // 选中 { } else // 取消选中 { } }

Objective-C-修改TabBarController的图标颜色及字体颜色(选中及未选中)

self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; self.window.backgroundColor = [UIColor whiteColor]; UITabBarController *mainTabBar = [[UITabBarController alloc] init]; UIView *backView = [[UIView alloc] initWithFrame:CGRe

jQuery选取所有复选框被选中的值并用Ajax异步提交数据

昨天和朋友做一个后台管理系统项目的时候涉及到复选框批量操作,如果用submit表单提交挺方便的,但是要实现用jQuery结合Ajax异步提交数据就有点麻烦了,因为我之前做过的项目中基本上没用Ajax来批量提交复选框数据,今天用到了就分享一下. 由于我做的项目一些地方比较复杂,这里我只举一个小例子,能理解就好. 首先,我做了一个简单的多个复选框的界面,如图: 这是一个比较简单的多个复选框提交界面.代码如下: 1 <body> 2 <div> 3 <input type=&quo

jquery和js如何判断checkbox是否选中

jquery: <div id="divId" class="divTable"><div class="tableBody"><ul ><li ><input type="checkbox" value="501" ></li></ul></div></div> $("input[type

转 jquery操作select(取值,设置选中)

每一次操作select的时候,总是要出来翻一下资料,不如自己总结一下,以后就翻这里了. 比如<select class="selector"></select> 1.设置value为pxx的项选中 $(".selector").val("pxx"); 2.设置text为pxx的项选中 $(".selector").find("option[text='pxx']").attr(&qu