jQuery Checkbox 全选 反选的简单实例

1.全选、反选

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title></title>
 <script src="http://xiazai.jb51.net/201611/yuanma/jquery(jb51.net).rar"></script>
 <script type="text/javascript">
  $(function () {
   $("#selall").on("click", function () { $("#plalst :checkbox").prop("checked", true); });
   $("#selnone").on("click", function () { $("#plalst :checkbox").prop("checked", false); });
   $("#resver").on("click", function () { $("#plalst :checkbox").prop("checked", function (i, val) { return !val; }); });
   $("#chkAll").on("click", function () { $("#plalst :checkbox").prop("checked", $("#chkAll").prop("checked")) });

  });
 </script>
</head>
<body>
 <div id="plalst">
  <input type="checkbox" />一队
  <input type="checkbox" />二队
  <input type="checkbox" />三队
  <input type="checkbox" />四队
  <input type="checkbox" />五队
  <input type="checkbox" />六队
 </div>
 <br /><br /><br />
 <input type="button" id="selall" value="全选" />
 <input type="button" id="selnone" value="全不选" />
 <input type="button" id="resver" value="反选" />
 <input type="checkbox" id="chkAll" /><label for="chkAll" >选择</label>
</body>
</html>

以上就是本文的全部内容，希望对大家有所帮助，同时也希望多多支持我们！

赞 (0)

相关推荐

  • jquery实现简单的全选和反选功能

    首先我们看个简单的实例 <!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="server"&g

  • jQuery实现复选框全选/取消全选/反选及获得选择的值

    复制代码 代码如下: <!DOCTYPE html> <html> <head> <script type="text/javascript" src="../js/jquery-1.9.1.js"></script> <script type="text/javascript"> $(document).ready(function() { // 全选/取消全部 $(&qu

  • 用JQuery实现全选与取消的两种简单方法

    用JQUERY实现全选和取消全选,没有js那么繁琐,而且支持更多浏览器. 复制代码 代码如下: <mce:script type="text/javascript"><!-- $(function() {      $("#checkall").click(function() {          $("input[@name='checkname[]']").each(function() {              $(

  • jQuery菜单实例(全选,反选,取消)

    废话不多说,直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input type="button" value="全选" onclick="chec

  • jQuery 全选 全部选 反选 实现代码

    1.概述 在项目中经常遇到列表中对复选框进行勾选操作,全选...反选.. 2. example <html> <body> <form id="test-form" action="test"> <legend>请选择想要学习的编程语言:</legend> <fieldset> <p><label class="selectAll"><input

  • jquery复选框全选/取消示例

    功能: a:实现点击复选框的时候全选所有的子复选框,再点击取消所有复选框的选中状态 b:有一个子复选框选中则父复选框选中 所有子复选框都不选中则父复选框不选中 复制代码 代码如下: /** * 全选函数 * @param mainId 主复选框id * @param klass 下属复选框的class */function selectAll(mainId,klass){ $("." + klass).each(function(){     if($("#" +

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

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

  • jQuery Checkbox 全选 反选的简单实例

    1.全选.反选 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="http://xiazai.jb51.net/201611/yuanma/jquery(jb51.net).rar"></script> <script type="text/javascript"

  • jquery checkbox全选反选效果代码

    jquery checkbox全选反选效果代码

    运行后查看效果,需要刷新下. jquery事件2 你最喜欢的体育运动是? 你的姓名: 足球 篮球 兵乓球 游泳 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • jQuery实现全选反选操作案例

    jQuery实现全选反选操作案例

    本文实例为大家分享了jQuery实现全选反选操作的具体代码,供大家参考,具体内容如下 全选+反选 可根据控制台结合查看结果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <me

  • Jquery CheckBox全选方法代码附js checkbox全选反选代码

    jquery方法如下: 复制代码 代码如下: function CheckAll(val) { $("input[name='chkJob']").each(function() { this.checked = val; }); $("#chkAll").attr("checked", val);//设定全选按钮状态 } val 该参数传递的是全选按钮的选择状态 name='chkJob' 这个为列表中的checkbox名称 chkAll 就为

  • JQUERY CHECKBOX全选,取消全选,反选方法三

    jquery.checkboxes.zip,然后解压引用到使用插件的页面,这个不用多说了吧!下面看具体例子,为了让大家更好的理解,我直接把实现功能的代码贴出来: 复制代码 代码如下: $("#myform").toggleCheckboxes()//全选,取消全选,反选 $("#myform").toggleCheckboxes(":not(#checkbox1)")//全选,取消全选且不选中第一个,反选 $("#myform"

  • jquery、js操作checkbox全选反选

    操作checkbox,全选反选 复制代码 代码如下: //全选 function checkAll() { $('input[name="TheID"]').attr("checked", "checked"); } //反选 function uncheckAll() { $('input[name="TheID"]').each(function() { this.checked = !this.checked; }) }

  • 3分钟写出来的Jquery版checkbox全选反选功能

    复制代码 代码如下: //反选 function selectnoALL() { $("input:checkbox").each(function (i) { if (this.checked) { this.checked = false; } else { this.checked = true; } }); } //全选 function selectALL() { var chelength = $("input:checkbox").length; $(

  • jQuery CheckBox全选、全不选实现代码小结

    直接上代码. Index $(function() { $("#CheckAll").click(function() { var flag = $(this).attr("checked"); $("[name=subBox]:checkbox").each(function() { $(this).attr("checked", flag); }) }) }) 全选 1 2 3 4 [Ctrl+A 全选 注:如需引入外部J

  • jQuery checkbox全选/取消全选实现代码

    jQuery版本:1.3.2 复制代码 代码如下: <html> <head> <script src="jquery-1.3.2.min.js" type="text/javascript"></script> </head> <body> <input type="checkbox" name="chk_list" id="chk_li

  • jquery checkbox全选、取消全选实现代码

    复制代码 代码如下: <script src="http://img.jb51.net/jslib/jquery/jquery-1.3.2.min.js"></script> <input type="checkbox" name="checkbox_name[]" id="checkbox_name_1″ />1<br /> <input type="checkbox&q

随机推荐