一個數值保存覆選框的值 [TOC] 前言 在開發過程中，對於網頁中的多選，我們有很多種存儲方式，常見的如逗號分隔。下文介紹一種通用設計方式：用一個整數來存儲覆選框的值。 準備知識 —— 位與運算 位與運算：二進位運算，相同位的兩個數字都為1，則為1；若有一個不為1，則為0，如： 設計 將多項的選項值 ...
目錄
一個數值保存覆選框的值
前言
在開發過程中，對於網頁中的多選，我們有很多種存儲方式，常見的如逗號分隔。下文介紹一種通用設計方式：用一個整數來存儲覆選框的值。
準備知識 —— 位與運算
位與運算：二進位運算，相同位的兩個數字都為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>
總結
這種做法之前就已經見過，但是看完就忘了，故寫下此文已作記錄。
養成位運算的思維方式，對設計有一定的幫助~
