一個數值儲存核取方塊的值

Jenyow發表於2018-08-23

目錄

一個數值儲存核取方塊的值

前言

在開發過程中，對於網頁中的多選，我們有很多種儲存方式，常見的如逗號分隔。下文介紹一種通用設計方式：用一個整數來儲存核取方塊的值。

準備知識 —— 位與運算

位與運算：二進位制運算，相同位的兩個數字都為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>

總結

這種做法之前就已經見過，但是看完就忘了，故寫下此文已作記錄。
養成位運算的思維方式，對設計有一定的幫助~

相關文章