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);
      });
           

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