jquery复选框练习

亦凉 2022-08-05 15:17 206阅读 0赞

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

![Center][]

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

效果图二：

![Center 1][]

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

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

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

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

[Center]: /images/20220805/a2010a33c9cf4d579e2ef8ffa9f98404.png
[Center 1]: /images/20220805/65ab8c944959475f8b3b00226dcabe2b.png