Home > Article > Web Front-end > jquery implements select all and inverse single selection
This time I will bring you jquery to realize the selection of all and reverse the selection of radio. What are the precautions for jquery to realize the selection of all and reverse the selection of radio. The following is a practical case. Let’s take a look.
<linkrel="stylesheet"href="http://wiki.jikexueyuan.com/project/bootstrap4/dist/css/bootstrap.min.css"rel="external nofollow"> <scriptsrc="https://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"> </script> <tableclass="table table-bordered "> <theadclass="tab_head"> <tr> <td> <inputtype="checkbox"onclick="selectAll()"></td> <th>角色名称</th> <th>角色说明</th> <th>所属系统</th> </tr> </thead> <tbody> <tr> <td> <inputtype="checkbox"></td> <td>系统管理员</td> <td>管理员角色</td> <td>武进公安平台</td> </tr> <tr> <td> <inputtype="checkbox"></td> <td>系统管理员</td> <td>管理员角色</td> <td>武进公安平台</td> </tr> <tr> <td> <inputtype="checkbox"></td> <td>系统管理员</td> <td>管理员角色</td> <td>武进公安平台</td> </tr> </tbody> </table> <script> function selectAll(){ $("input[type='checkbox']").each( function() { if($(this).prop("checked")==true) { $("input[type='checkbox']").prop('checked', true); return; } else { $("input[type='checkbox']").prop('checked', false); return; } }); } </script>
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
jQuery plug-in FusionCharts draws pie charts
jquery implements non-dynamic search
The above is the detailed content of jquery implements select all and inverse single selection. For more information, please follow other related articles on the PHP Chinese website!