欢迎来到元素模板ys720.com,本站提供专业的织梦模板PBOOTCMS模板网站模板网站修改/网站仿站
当前位置:主页 > 程序教程 > 其他教程 >
其他教程

jq 全选input 代码

(元素模板) / 2023-07-16 15:05
jq如何制作input 点击全选 功能?
元素模板为您解答
首先是html代码
  <table>
    <thead>
         <tr><td>网站名称</td></tr>
     </thead>
     <tbody>
         <tr><td><input type="checkbox">元素模板</td>
         </tr>
         <tr><td><input type="checkbox">YS720.COM</td>
         </tr>
         <tr><td><input type="checkbox">网站模板</td></tr>
         <tr><td><input type="checkbox">网站修改</td>
         </tr>
     </tbody>
     <tfoot>
         <tr><td><input type="checkbox">全部</td></tr>
     </tfoot>
 </table>
下面是JQ代码
 <script>
    // 全选/全取消
     $("tfoot input[type=checkbox]").click(function(){
         $("tbody input[type=checkbox]").prop("checked",$(this).prop("checked"));
     })
     // 其他按钮
     $("tbody input[type=checkbox]").click(function(){
         if($("tbody input[type=checkbox]:checked").length===$("tbody input[type=checkbox]").length){
             $("tfoot input[type=checkbox]").prop("checked",true);
         }else{
             $("tfoot input[type=checkbox]").prop("checked",false);
         }
     })
 </script>
记住需要加入jq库
Copyright @ 2013-2021 元素模板 www.ys720.com All Rights Reserved. 版权所有 元素模板 www.ys720.com