axure实现复选框全选_jq简单的全选、反选和全不选效果

jquery是很实用和方便的前端效果库，可以让我减少很多的操作和节省很多的时间。今天，我们来说一下jq的全选、全不选和反选效果，本篇讲的是最简单简洁的jq全选、全不选和反选的例子。如果还有什么其他的功能要求可自己根据所学到的基础来扩展一下。

首先，我们来创建一下所需要的html页面，导入jq文件，这里我们使用的是jq压缩版，把复选框例子填充上。

创建html页面的同时，把全选、全不选和反选按钮分别给它们id命名：all、not、reverse，方便jq之后获取CheckBox来实现全选不选等效果。

接下来，就是我们的jq登场了，jq根据按钮的ID名来获取点击事件，来实现我们所需要的效果。

其中，prop（），我们来说一下它的含义。

prop() 方法设置或返回被选元素的属性和值。

当该方法用于返回属性值时，则返回第一个匹配元素的值。

当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。

注意：prop() 方法应该用于检索属性值，例如 DOM 属性（如 selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected）。

这就是最简单的全选、全不选和反选的实例，希望对你们有所帮助。下面附上代码，供你们参考:

html代码：

<div id="box-function"><input id="all" type="button" value="全选" /><input id="not" type="button" value="全不选" /><input id="reverse" type="button" value="反选" /></div><div id="choose"><input type="checkbox" /><input type="checkbox" /><input type="checkbox" /><input type="checkbox" /><input type="checkbox" /><input type="checkbox" /><input type="checkbox" /><input type="checkbox" /><input type="checkbox" /><input type="checkbox" /><input type="checkbox" /><input type="checkbox" /> </div>

jq代码：

<script type="text/javascript">$(function(){var $choose = $("#choose input");//全选$("#all").click(function(){$choose.each(function(){$(this).prop("checked",true);});});//全不选$("#not").click(function(){$choose.prop("checked",false);});//反选$("#reverse").click(function(){$choose.each(function(){$(this).prop("checked",!$(this).prop("checked"));});});});</script>

原文：

jq简单的全选、反选和全不选效果-三人行慕课​www.3mooc.com

总结

以上是生活随笔为你收集整理的axure实现复选框全选_jq简单的全选、反选和全不选效果的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。