jquery复选框练习

        做了锋利的jquery里复选框的两个小练习。效果图一:

     

      通过4个按钮实现复选框的全选、全不选、反选及提交选中选项并在页面中打印出来的功能

      先来看看html,表单元素中的name值的设定非常重要,复选框的name值是相同的      

<input type="checkbox" name="items" value="足球"/>足球
		<input type="checkbox" name="items" value="篮球"/>篮球
		<input type="checkbox" name="items" value="羽毛球"/>羽毛球
		<input type="checkbox" name="items" value="乒乓球"/>乒乓球
     再来看下jquery,点击全选后,所有的选项都会被勾上,这个效果是全选按钮加了个click事件,通过attr来设定checked的值,代码如下:     

$("#CheckedAll").click(function(event) {
      $('[name=items]:checkbox').attr('checked', true);
   	});
而全不选则相反:

// 全不选
   $("#CheckedNo").click(function(event) {
      $('[name=items]:checkbox').attr('checked', false);
   	});
而反选则稍复杂点,用了each循环出所有选项,并结合了JS来简明地写出了反选的效果

// 反选
  $("#CheckedRev").click(function(event) {
      $('[name=items]:checkbox').each(function() {
      	this.checked=!this.checked;
      });
   	 });

而最后的打印选中功能则是用到了字符串拼接,each循环,转义符,\r\n是换行回车的意思

 $("#send").click(function(event) {
   	var str="你选中的是:\r\n";
   	 $('[name=items]:checkbox:checked').each(function() {
   	 str+=$(this).val()+"\r\n";
   	 });
   	 alert(str);
   	 });
效果图二:



这个例子主要是做了个全选和选项联动的效果,当所有选项都被勾选时,全选也会自动勾选,只要有一个选项未被勾选,全选就不会被勾选

这里用到了临时变量这个小技巧,避免重复使用同一个选择器选择页面中的元素,提升程序效率。并用到了filter()方法筛选出选中的复选框。并直接给CheckedAll赋值。

 $('[name=items]:checkbox').click(function(event) {
       var $tmp=$('[name=items]:checkbox');
       $('#CheckedAll').attr('checked', $tmp.length==$tmp.filter(':checked').length);
      });

其余的效果的做法与练习一的做法一致


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值