許多郵件系統都會採用的 全選 / 取消全選的功能 ,如 Google mail 的郵件清單 ,就有提拱這樣的功能

那麼 ,它該如何製作呢 ? 請看以下的簡單範例 ...

以選取興趣為例 ,在表單裡有以下的內容呈現 .. 使用者可以透過 下面的 全選 / 取消選取 / 反向選取 三個功能鈕操作

 

要實現這樣的功能 ,我們可以在 Dreamweaver CS3 這樣做..

拉出表單 ,並且依需求擺放數個 Check box ,然後設定相關的數值 ,資料內容

並且插入以下 checkAll,uncheckAll, switchAll 的 JavaScript 程式碼 ,並且隨著check item 總數,

修改 for 迴圈的最大值 (如果只有五個 check box item ,則請將 <= 13 改成 <=5 即可)

 

下圖為check box 在表單呈現的參考畫面 .. 

最後再新增三個 button ,並且分別為三個button加上不同的 onclick 事件 ,以呼叫預先訂義的 javascript 函式

 

以上為簡單版的寫法 ,當我們預先知道有幾個 check box 時,就可以用這樣的方式寫死它

若check box 的數量會依不同條件值有所增減 ,則將可以透過程式變數控制的方式,透態的改變 javascript的內容.

供讀者參考 ,歡迎透過留言版發表問題 ,謝謝大家

 

 


arrow
arrow
    全站熱搜
    創作者介紹
    創作者 Frank 的頭像
    Frank

    經驗交流分享與備忘

    Frank 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄