一個數值保存復選框的值
阿新 • • 發佈：2018-08-24
存儲方式 網頁 put 思維 示例 body text true 存儲
目錄
- 一個數值保存復選框的值
- 前言
- 準備知識 —— 位與運算
- 設計
- 回顯
- 示例
- 總結
一個數值保存復選框的值
前言
在開發過程中，對於網頁中的多選，我們有很多種存儲方式，常見的如逗號分隔。下文介紹一種通用設計方式：用一個整數來存儲復選框的值。
準備知識 —— 位與運算
位與運算：二進制運算，相同位的兩個數字都為1，則為1；若有一個不為1，則為0，如：
00101
& 11100
------------
00100設計
將多項的選項值分別設置為 2 的 n 次方，n 從 0 開始，每多一項，n + 1。即 1，2，4，8...
多選的存儲值為各項值之和，如選中了第 1、3 項，則值為：1 + 4 = 5
回顯
假設存儲的值為 5 ，要使相應的項被勾選，則是循環多項的值，每項與存儲值 5 進行 位與運算，如果值與選項本身的值相等，則選中該項；相反地，如果運算值為 0 ，則設置為不選中：
1 & 5 = 1
2 & 5 = 0
4 & 5 = 4
8 & 5 = 0示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Checkbox Test</title> </head> <body> <form> <input type="checkbox" name="test" value="1"> 1 <input type="checkbox" name="test" value="2"> 2 <input type="checkbox" name="test" value="4"> 4 <input type="checkbox" name="test" value="8"> 8 </form> <input type="text" id="result" placeholder="設置要回顯的值"> <button id="show">回顯</button> <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script> <script> $(function () { $("[name=‘test‘]").on("change", function () { var result = 0; $("[name=‘test‘]:checkbox:checked").each(function(){ result += parseInt($(this).val()); }); $("#result").val(result); }); $("#show").on("click", function () { var result = parseInt($("#result").val()); $("[name=‘test‘]:checkbox").each(function(){ var value = parseInt($(this).val()); if ((result & value) == value) { $(this).prop("checked", true); } else { $(this).prop("checked", false); } }); }); }); </script> </body> </html>
總結
這種做法之前就已經見過，但是看完就忘了，故寫下此文已作記錄。
養成位運算的思維方式，對設計有一定的幫助~
一個數值保存復選框的值