废话不多说了,直接给大家贴代码了,具体代码如下所示:

<td width="82%" colspan="3">
<input type="checkbox" id="all">全选&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="checkbox" id="reverse">反选
</td>
<td width="82%" colspan="3">
<s:checkboxlist name="resUuids" list="resList" listKey="uuid" listValue="name"></s:checkboxlist>
</td>
$(function(){
//全选
$("#all").click(function(){
//将下面所有组件全部选中
//$("[name=resUuids]")  是多个组件,整体是个对象数组
//$("[name=resUuids]").attr("checked","checked");
//先获取当前组件的状态
//$(this).attr("checked")
//将所有组件设置为对应状态
//$("[name=resUuids]").attr("checked",$(this).attr("checked"));
//$(this).attr("checked")获取的值究竟是什么
//alert($(this).attr("checked"));    //undefined
//$("[name=resUuids]").attr("checked","undefined");
//js语法规则,除了false,FALSE,"false","FALSE",0五个值之外的所有值,认定为true
//$("[name=resUuids]").attr("checked",false);
var flag = $(this).attr("checked");
$("[name=resUuids]").attr("checked",flag == "checked");
});
//反选
    $("#reverse").click(function(){
      //将所有组件的状态切换成原始状态的反状态
      //$("[name=resUuids]").attr("checked",!($("[name=resUuids]").attr("checked")=="checked"));
      //当选择器选中的组件是多个时,获取组件的任何数据都是对第一个组件进行操作
      //alert(!($("[name=resUuids]").attr("checked")=="checked"));
      //对每个组件进行迭代,让其操作状态为对应组件的原始状态的反状态
      $("[name=resUuids]").each(function(){
        //使用each操作实现对每个组件的操作
        var flag = $(this).attr("checked"); 
        $(this).attr("checked", !(flag =="checked"));
      });
      checkSelect();
    });
//绑定组件
    $("[name=resUuids]").click(function(){
      //将全选的状态设置为基于所有组件的综合状态值
      checkSelect();
    });
    function checkSelect(){
      var allFlag = true;
      $("[name=resUuids]").each(function(){
        var flag = $(this).attr("checked") == "checked";
        //&:位运算与   &&:逻辑与
        allFlag = allFlag && flag; 
      });
      $("#all").attr("checked",allFlag);
    }
  });

以上所述是小编给大家介绍的jQuery 全选 全不选 事件绑定的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

标签:
jquery,事件绑定,jquery,全选,jquery,反选

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
评论“jQuery 全选 全不选 事件绑定的实现代码”
暂无“jQuery 全选 全不选 事件绑定的实现代码”评论...

P70系列延期,华为新旗舰将在下月发布

3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。

而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?

根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。