一个数值保存复选框的值
程序员文章站
2022-04-12 12:59:40
一个数值保存复选框的值 [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>
总结
这种做法之前就已经见过，但是看完就忘了，故写下此文已作记录。
养成位运算的思维方式，对设计有一定的帮助~
上一篇： OC重写init方法
下一篇： 关于WebSocket协议