编程 Javascript

jQuery Checkbox 全选反选的简单实例

Posted in Javascript onNovember 29, 2016

1.全选、反选

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title></title>
 <script src="http://xiazai.3water.com/201611/yuanma/jquery(3water.com).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>

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

- Author -

森林王子

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js使用eval解析json实例与注意事项分享

Jan 18 Javascript

jQuery中hide()方法用法实例

Dec 24 Javascript

JS获取IMG图片高宽的简单实例

May 17 Javascript

深入理解JavaScript中的call、apply、bind方法的区别

May 30 Javascript

jQuery+HTML5实现弹出创意搜索框层

Dec 29 Javascript

最通俗易懂的javascript变量提升详解

Aug 05 Javascript

Sublime Text新建.vue模板并高亮(图文教程)

Oct 26 Javascript

浅析Vue 生命周期

Jun 21 Javascript

angularjs 动态从后台获取下拉框的值方法

Aug 13 Javascript

利用vue重构有赞商城的思路以及总结整理

Feb 21 Javascript

[jQuery] 事件和动画详解

Mar 05 jQuery

echarts浮动显示单位的实现方法示例

Dec 04 Javascript

使用Vue.js创建一个时间跟踪的单页应用

Nov 28 #Javascript

js拖拽功能实现代码解析

Nov 28 #Javascript

百度搜索框智能提示案例jsonp

Nov 28 #Javascript

JS函数多个参数默认值指定方法分析

Nov 28 #Javascript

ajax级联菜单实现方法实例分析

Nov 28 #Javascript

jQuery select自动选中功能实现方法分析

Nov 28 #Javascript

JS两种类型的表单提交方法实例分析

Nov 28 #Javascript

jQuery Checkbox 全选 反选的简单实例

jQuery Checkbox 全选反选的简单实例