复选框应用

本文记录的是复选框的应用,即复选框的全选,反选,全不选等操作,js代码如下:

$(function(){
 $("#CheckedAll").click(function(){//全选或者全部选框的点击事件
  $("input[name=items]").attr("checked",this.checked);//事件主体的选中状态跟所有的复选框的选中状态是一致的,
 });                             //只要所有复选框全部被选中,事件主题也被选中,如果有一个没有被选中,则不被选中。
 $("[name=items]:checkbox").click(function(){//任意复选框的点击事件
  var flag = true;//定义一个变量,用以判断复选框是否全部被选中
  $("[name=items]:checkbox").each(function(){//只要存在没有被选中的复选框,就让flag=false
   if(!this.checked){
    flag = false;
   }
  });
  $("#CheckedAll").attr("checked",flag);
 });

//上述方法相对比较繁琐,我们可以考虑用复选框的总个数是否与被选中的复选框总个数相等来联动全选/全部选

$("[name=items]:checkbox").click(function(){

   var  tmp=$("[name=items]checkbox");

   $("#CheckedAll").attr("checked",tmp.length==tmp.filter(":checked").length);//用filter过滤被选中的复选框

});
 $("#checkedNo").click(function(){//全不选按钮
  $("input[name=items]").attr("checked",false);
 });
 $("#checkedRev").click(function(){//反选按钮
  $("[name=items]:checkbox").each(function(){
   $(this).attr("checked",!$(this).attr("checked"));
  });
 });
 $("#send").click(function(){
  var str = "";
  $("[name=items]:checkbox:checked").each(function(){
   str += $(this).val() + "\n";
  });
  alert(str);
 });
  
})


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值