基于jquery实现复选框全选，反选，全不选等功能

前端技术 2023/09/06 JavaScript

jquery 实现全选，反选，全不选等功能，下面直接以例子进行说明。设页面有如下一组复选框和几个相关按钮（全选，反选，全不选等）：

<input type=\"checkbox\" name=\"fruit\" value=\"apple\" />苹果 
<input type=\"checkbox\" name=\"fruit\" value=\"orange\" />橘子 
<input type=\"checkbox\" name=\"fruit\" value=\"banana\" />香蕉 
<input type=\"checkbox\" name=\"fruit\" value=\"grape\" />葡萄 
 
<input type=\"button\" id=\"btn1\" value=\"全选\"> 
<input type=\"button\" id=\"btn2\" value=\"全不选\"> 
<input type=\"button\" id=\"btn3\" value=\"反选\"> 
<input type=\"button\" id=\"btn4\" value=\"选中所有奇数\"> 
<input type=\"button\" id=\"btn5\" value=\"获得选中的所有值\">

则分别实现相关功能的完整代码如下：

$(function(){ 
  $(\'#btn1\').click(function(){//全选 
    $(\"[name=\'fruit\']\").attr(\'checked\',\'true\'); 
  }); 
  $(\'#btn2\').click(function(){//全不选 
    $(\"[name=\'fruit\']\").removeAttr(\'checked\'); 
  }); 
  $(\'#btn3\').click(function(){//反选 
    $(\"[name=\'fruit\']\").each(function(){ 
      if($(this).attr(\'checked\')){ 
        $(this).removeAttr(\'checked\'); 
      }else{ 
        $(this).attr(\'checked\',\'true\'); 
      } 
    }) 
  }); 
  $(\"#btn4\").click(function(){//选中所有奇数 
    $(\"[name=\'fruit\']:even\").attr(\'checked\',\'true\'); 
  }) 
  $(\"#btn5\").click(function(){//获取所有选中的选项的值 
    var checkVal=\'\'; 
    $(\"[name=\'fruit\'][checked]\").each(function(){ 
      checkVal+=$(this).val()+\',\'; 
    }) 
    alert(checkVal); 
  }) 
});

注意使用 jquery 之前必须要引入 jquery 包哦！

以上就是小编辛苦整理的代码，是不是用起来很方便，希望能够帮到大家。

本文地址：https://www.stayed.cn/item/17029

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案