当前位置: 萬仟网 > IT编程>网页制作>Html5 > 一个数值保存复选框的值

一个数值保存复选框的值

2018年08月27日  | 萬仟网IT编程  | 我要评论

目录

一个数值保存复选框的值


前言

在开发过程中,对于网页中的多选,我们有很多种存储方式,常见的如逗号分隔。下文介绍一种通用设计方式:用一个整数来存储复选框的值。


准备知识 —— 位与运算

位与运算:二进制运算,相同位的两个数字都为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>

总结

这种做法之前就已经见过,但是看完就忘了,故写下此文已作记录。
养成位运算的思维方式,对设计有一定的帮助~

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

验证码:
Copyright © 2020  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com