2017-11-22
官方網站
http://fronteed.com/iCheck
http://icheck.fronteed.com/
http://www.bootcss.com/p/icheck/
(下圖) 去 jQuery 官方網站和 iCheck 官方網站下載套件，從檔案總管拖放到 Visual Studio 中你想要的目錄。
Default.aspx 內容
| <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication2.Default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script src="Scripts/jquery-3.2.1.min.js"></script> <link href="Scripts/icheck-1.x/skins/all.css" rel="stylesheet" /> <script src="Scripts/icheck-1.x/icheck.min.js"></script> <title></title> </head> <body> <form id="form1" runat="server"> <div> </div> </form> <table id="testTable"> <thead> <tr><th><input type="checkbox" class="js-checkbox-all">全選</th></tr> </thead> <tbody> <tr><td><input type="checkbox">選項1</td></tr> <tr><td><input type="checkbox">選項2</td></tr> <tr><td><input type="checkbox" disabled>選項3</td></tr> <tr><td><input type="checkbox">選項4</td></tr> </tbody> </table> <script> var $checkboxAll = $(".js-checkbox-all"), $checkbox = $("tbody").find("[type='checkbox']").not("[disabled]"), length = $checkbox.length, i=0; //啟動icheck $(("[type='checkbox']")).iCheck({ checkboxClass: 'icheckbox_minimal-blue', radioClass: 'iradio_square-blue' }); //全選checkbox $checkboxAll.on("ifClicked",function(event){ if(event.target.checked){ $checkbox.iCheck('uncheck'); i=0; }else{ $checkbox.iCheck('check'); i=length; } }); $checkbox.on('ifClicked',function(event){ event.target.checked ? i-- : i++; if(i==length){ $checkboxAll.iCheck('check'); }else{ $checkboxAll.iCheck('uncheck'); } }) </script> </body> </html> |
(下圖) 執行結果
(待續)
相關
jquery插件icheck api使用（美化checkbox和radio样式）
http://www.51xuediannao.com/js/jquery/icheck.html
iCheck表单美化插件使用方法详解（含参数、事件等）
http://www.exp99.com/f2e/iCheck.html
沒有留言:
張貼留言