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

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 包哦！

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

赞 (0)

相关推荐

  • JQuery选中checkbox方法代码实例（全选、反选、全不选）

    JQuery选中checkbox方法代码实例（全选、反选、全不选）

    1.checkbox list选择 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="serv

  • jquery 实现checkbox全选，反选，全不选等功能代码(奇数)

    设页面有如下一组复选框和几个相关按钮(全选,反选,全不选等): 复制代码 代码如下: <input type="checkbox" name="fruit" value="apple" />苹果 <input type="checkbox" name="fruit" value="orange" />橘子 <input type="checkbox

  • jQuery实现全选、反选和不选功能

    本文给大家分享一段基于jQuery的全选.反选和不选功能的代码,适用于网页多选后需要进行批量操作的场景(如批量删除等).文章结合实例,代码简洁,基本覆盖选项选择操作的方方面面,希望可以帮到有需要的WEB爱好者. HTML 我们的页面上有一个歌曲列表,列出多行歌曲名称,并匹配复选框供用户选择,并且在列表下方有一排操作按钮. <ul id="list"> <li><label><input type="checkbox" val

  • jQuery对checkbox 复选框的全选全不选反选的操作

    jQuery对checkbox 复选框的全选全不选反选的操作

    先给大家展示下效果图,如果大家感觉还不错,请继续参考实现代码. HTML代码: <body> <ul id="list"> <li><label><input type="checkbox" name="items" value="1"> 1.时间都去哪儿了</label></li> <li><label><inp

  • jquery全选/全不选/反选另一种实现方法(配合原生js)

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • 利用jQuery实现CheckBox全选/全不选/反选的简单代码

    利用jQuery实现CheckBox全选/全不选/反选的简单代码

    jQuery有些版本中实现CheckBox全选/全不选/反选会有bug,经测试jquery-1.3.1.js–>测试通过,jquery-1.5.1.js–>测试不通过. 实现CheckBox全选/全不选/反选代码如下: <%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional

  • 基于jQuery实现复选框的全选 全不选 反选功能

    本代码是在众多的jQuery复选框功能代码中精选出来的,本人项目中使用的代码,这里分享给大家. jQuery代码: 复制代码 代码如下: $(function(){             $("#checkedAll").click(function(){                 $('[name=items]:checkbox').attr('checked',true);             });             $("#checkedNo&quo

  • jquery实现全选、不选、反选的两种方法

    在取复选框checkbox的属性checked属性值时,发现一个问题,就是当用attr取值时,真的为"checked",假的为"undefined";当用prop取值时,真的为"true",假的为"false".经过网上参考一些资料,及根据官方的建议这两个用法:具有 true 和 false 两个属性的属性,如 checked, selected 或者 disabled 使用prop(),其他的使用 attr(). 方法一:

  • jquery 全选、全不选、反选效果的实现代码【推荐】

    jquery 全选.全不选.反选效果的实现代码[推荐]  首先:引入jquery <title>haran.info_jquery实例_全选全不选反选_select-all_unselect-all_reverse</title> <meta http-equiv="content-type"content="text/html; charset=UTF-8"/> <script src="/js/jquery-1

  • 基于jQuery实现复选框是否选中进行答题提示

    基于jQuery实现复选框是否选中进行答题提示

    最近是在项目需求中遇到的功能点,根据用户选择的选项给出相应的提示,下面给出了测试程序的效果图,看看是不是很满意,如果大家觉得还不错,请继续查看全文. 一.实现的原理: 第一步:判断用户选择哪一项,即哪个复选框被选中 第二步:根据复选框的选中情况给出相应的提示 二.下面来看主体程序: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title&

  • 基于jQuery下拉选择框插件支持单选多选功能代码

    基于jQuery下拉选择框插件支持单选多选功能代码

    由于最近项目的需求,需要做一个下拉选择框的插件,支持单选显示表单数据,多选显示表格数据,该插件主要运用了jQuery与jqgrid以及easyui. 下面给大家展示下效果图,如果大家感觉还不错,请参考实现代码: 多选:呈现列表 具体代码如下所示: /** *下拉框插件-chooseList *调用插件的方式以及格式: * 1.首先你需要创建一个div面板,给div定义ID * 2.在你所需要的地方调用插件: * 参数说明: * $("#divID").chooseList({ * qu

  • layui table复选框禁止某几条勾选的实例

    Layui table复选框禁止勾选 var list = [0,1,3];//获得禁用的tr的行index //遍历设置复选框禁用 for(var i=0;i<list.length;i++){ $(".layui-table tr[data-index="+list[i]+"] input[type='checkbox']").prop('disabled',true); $(".layui-table tr[data-index="+

  • 基于jQuery实现下拉框

    项目中经常会遇到下拉框,在扁平化和响应式布局大行其道的今天,使用jQuery来实现下拉框就十分的必要了,而且也会美观很多,这里就给大家推荐一段基于jQuery的下拉框代码. jQuery代码: 复制代码 代码如下: $(function(){             $('#add').click(function(){                 var $options = $('#select1 option:selected');                 $options.a

  • 基于jQuery Easyui实现登陆框界面

    基于jQuery Easyui实现登陆框界面

    效果图 CSS a{ text-decoration:none; } body{ margin:0px; } #header{ width:100%; height:30px; background-color:#E0EFFF; padding-top: 5px; padding-bottom: 10px; } #header .logo{ margin-left: 50px; font-size: 24px; font-family: 微软雅黑; } #picture{ width:100%;

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

    jquery 实现全选,反选,全不选等功能,下面直接以例子进行说明.设页面有如下一组复选框和几个相关按钮(全选,反选,全不选等): <input type="checkbox" name="fruit" value="apple" />苹果 <input type="checkbox" name="fruit" value="orange" />橘子 <in

  • 基于jquery的选择标签至文本域效果,可多选/可过滤重复/可限制个数的实现代码

    暂时没有对手动输入的做判断, 需要的话, 可自行在keyup及change事件中添加相关判断. 相关说明及调用方法,请参见代码中的注释. 演示及代码: 选择标签至文本域效果,可多选/可过滤重复/可限制个数@Mr.Think /*reset css*/ body,input{letter-spacing:1px;font:12px/1.5 tahoma,arial,\5b8b\4f53} div,h2,p,input,select{margin:0;padding:0} input{vertica

  • 基于jquery实现select选择框内容左右移动添加删除代码分享

    基于jquery实现select选择框内容左右移动添加删除代码分享

    本文实例讲述了select选择框内容左右移动添加删除.分享给大家供大家参考.具体如下: select选择框内容左右移动添加删除代码基于jquery-1.8.3.min.js实现,简单实用,选中选项内容,点击移动按钮可进行内容左右移动,双击option内容也可左右移动,支持单选移动.多选移动和一键全部移动! 运行效果图:                                  ----------------------查看效果----------------------- 小提示:浏览

  • 基于JQuery的Select选择框的华丽变身

    基于JQuery的Select选择框的华丽变身

    不过这种情况可能是一去不复返了,如果你猜测是使用HTML5技术, 那就错了,在中国,使用IE6浏览器的人仍占绝大大多数,这种古老的浏览器是不认识HTML5的. 我现在推荐的是一款JavaScript插件,它有JQuery和Prototype两种版本,支持所有类型的浏览器.使用它后,你的页面上的select选择框会变的漂亮的让你大吃一惊,下面是使用前和使用后的对比效果图. 单选模式: 多选模式: 更多的效果请访问这个插件的官方主页的中文翻译Chosen演示页面. 具体的用法非常简单,你只需要在se

随机推荐