一個數值保存復選框的值
阿新 • • 發佈: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>
總結
這種做法之前就已經見過,但是看完就忘了,故寫下此文已作記錄。
養成位運算的思維方式,對設計有一定的幫助~
一個數值保存復選框的值