目录
一个数值保存复选框的值
前言
在开发过程中，对于网页中的多选，我们有很多种存储方式，常见的如逗号分隔。下文介绍一种通用设计方式：用一个整数来存储复选框的值。
准备知识 —— 位与运算
位与运算：二进制运算，相同位的两个数字都为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>
< charset=\"UTF-8\">
< >Checkbox Test</ >
</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>
< src=\"http://libs.baidu.com/jquery/1.11.1/jquery.min.js\"></ >
< >
$(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);
}
});
});
});
</ >
</body>
</html>
总结
这种做法之前就已经见过，但是看完就忘了，故写下此文已作记录。
养成位运算的思维方式，对设计有一定的帮助~
继续阅读与本文标签相同的文章
-
IoT物联网设备OTA固件升级开发实践
2026-05-18栏目： 教程
-
Kubernetes v1.16 发布 | 云原生生态周报 Vol. 20
2026-05-18栏目： 教程
-
阿里云 MVP 全球闭门会 2019 荣聚云栖小镇，从心出发！
2026-05-18栏目： 教程
-
Spring AOP应用场景你还不知道？这篇一定要看！
2026-05-18栏目： 教程
-
阿里云云数据库RDS如何监控、备份及克隆实例？
2026-05-18栏目： 教程