jQuery實現全選反選功能
阿新 • • 發佈：2017-06-24
ava -type func tex solid blog pan 原因 input
廢話不說，直接上代碼！
<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實現全選反選功能