买网站平台名字吗,网站建设合并但与那个,软件开发app制作需要多少钱,昆山花桥做网站jquery是很实用和方便的前端效果库#xff0c;可以让我减少很多的操作和节省很多的时间。今天#xff0c;我们来说一下jq的全选、全不选和反选效果#xff0c;本篇讲的是最简单简洁的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 idbox-functioninput idall typebutton value全选 /input idnot typebutton value全不选 /input idreverse typebutton value反选 //divdiv idchooseinput typecheckbox /input typecheckbox /input typecheckbox /input typecheckbox /input typecheckbox /input typecheckbox /input typecheckbox /input typecheckbox /input typecheckbox /input typecheckbox /input typecheckbox /input typecheckbox /
/divjq代码script typetext/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
