jQuery实现全选反选功能
Posted 凌巴哥
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery实现全选反选功能相关的知识，希望对你有一定的参考价值。
废话不说，直接上代码！
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="jquery-3.1.1.min.js"></script> <title>Insert title here</title> </head> <body> <div style="margin: 20px;"> 全选：<input type="checkbox" id="selectAll" onclick="selects1()"> </div> <div style="width:600px;height: 40px;border: 1px solid #ccc"> 多选框1：<input type="checkbox" class="check_class"> 多选框2：<input type="checkbox" class="check_class"> 多选框3：<input type="checkbox" class="check_class"> 多选框4：<input type="checkbox" class="check_class"> 多选框5：<input type="checkbox" class="check_class"> 多选框6：<input type="checkbox" class="check_class"> </div><br> <script type="text/javascript"> /* * 方法1 在工作电脑和本地电脑都可以正常工作 * 方法2 在工作电脑只起一次作用，即勾选全选，反选后。再次勾选，不再起作用。本地电脑一样可以正常运行 * 可能原因是jquery版本问题 ? 工作电脑jQuery版本为1.11系列。这里为3.1.1 */ //实现方法1 function selects1(){ //实现全选，反选功能 var selectStatus = $(‘#selectAll‘).is(‘:checked‘); $(‘.check_class‘).each(function(){ $(this).prop(‘checked‘,selectStatus); }); } //实现方法2 function selects2(){ //实现全选，反选功能 var selectStatus = $(‘#selectAll‘).is(‘:checked‘); $(‘.check_class‘).each(function(){ $(this).attr(‘checked‘,selectStatus); }); } </script> </html>
以上是关于jQuery实现全选反选功能的主要内容，如果未能解决你的问题，请参考以下文章