jquery怎么实现全选和全不选功能?

jquery怎么实现全选和全不选功能?下面本篇文章给大家介绍一下使用jquery实现全选、反选和全不选功能的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

使用jquery实现全选、反选和全不选功能

下面通过实例来看看:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
	</head>

	<body>
		<div class="box">
			喜欢的水果:
			<ul>
				<li><input type="checkbox" />苹果</li>
				<li><input type="checkbox" />香蕉</li>
				<li><input type="checkbox" />橘子</li>
				<li><input type="checkbox" />西瓜</li>

			</ul>

			<div>
				<input type="button" class="seleAll" value="全选" />
				<input type="button" class="reverse" value="反选" />
				<input type="button" class="op" value="全不选" />

			</div>
		</div>
		<script type="text/javascript">
			//全选
			$(".seleAll").on("click", function() {
				var oin = $("input[type='checkbox']")
				oin.each(function() {
					$(this).prop("checked", true)
				})

			})

			//全不选
			$(".op").on("click", function() {
				var oin = $("input[type='checkbox']")
				oin.each(function() {
					$(this).prop("checked", false)
				})

			})

			// 反选 

			$(".reverse").on("click", function() {
				// 获取节点 

				var oin = $("input[type='checkbox']")

				oin.each(function() {

					this.checked = !this.checked

				})

			})
		</script>
	</body>

</html>

效果图:

1.gif

更多web前端知识,请查阅 HTML中文网 !!

以上就是jquery怎么实现全选和全不选功能?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » jQuery 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏