1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > axure实现复选框全选_jq简单的全选 反选和全不选效果

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

时间:2023-08-20 14:22:16

相关推荐

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简单的全选、反选和全不选效果-三人行慕课​

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。