一个数值保存复选框的值

目录

  • 一个数值保存复选框的值

    • 前言
    • 准备知识 —— 位与运算
    • 设计
    • 回显
    • 示例
    • 总结

一个数值保存复选框的值


前言

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


准备知识 —— 位与运算

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

总结

这种做法之前就已经见过,但是看完就忘了,故写下此文已作记录。

养成位运算的思维方式,对设计有一定的帮助~

原文地址:https://www.cnblogs.com/zhanyao/p/9527238.html

时间: 2024-10-10 05:54:21

一个数值保存复选框的值的相关文章

使用jquery获取被选中checkbox复选框的值

使用jquery获取被选中checkbox复选框的值:checkbox是重要的表单元素,在很多多项选择中使用,下面就通过代码实例介绍一下如何获取复选框中所有被选中项的值,希望能够给需要的朋友带来一定的帮助.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.

jquery获取选中的checkbox复选框的值

jquery获取选中的checkbox复选框的值:checkbox复选框是常用的表单元素之一,既然使用,一般就要获取选中的复选框的值,下面就介绍一下如何使用jQuery实现此功能.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/

sharepoint中根据“是/否(复选框)”的值显示隐藏指定栏

sharepoint中根据“是/否(复选框)”的值显示隐藏指定栏 function HideColumn(targetColumn, hideColumn) { var columnObj = $("input[Title='" + hideColumn + "']"); $("input[Title='" + targetColumn + "']").bind('click',function() { if($(this).

mui开发中获取单选按钮、复选框的值

js获取单选按钮的值 function getVals(){ var res = getRadioRes('rds'); if(res == null){mui.toast('请选择'); return;} mui.toast(res); } function getRadioRes(className){ var rdsObj = document.getElementsByClassName(className); var checkVal = null; for(i = 0; i < rd

复选框获取值(包括自定义属性),拼接成字符串

//获取复选框的自定义属性did的值 $(function() { $("input[type=checkbox]").on("click", function () { var vIds = ""; $("input:checked").each(function() { vIds += $(this).attr('did') + ","; }); if (vIds.length > 0) { vI

jquery怎样获取多个复选框的值?

jquery的遍历方法可以获取复选框所欲的选中值 1 2 $("input:checkbox:checked").each(function(index,element));   // 为所有选中的复选框执行函数,函数体中可以取出每个复选框的值 $("input:checkbox:checked").map(function(index,domElement)); // 将所有选中的复选框通过函数返回值生成新的jQuery 对象 实例演示:点击按钮获取checkbo

JavaScript获取复选框的值

使用JavaScript获取复选框的值 <!DOCTYPE html> <html> <head> <meta charset="GBK"> <title>获取复选框的值</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script>

使用js获取复选框的值,并把数组传回后台处理,过程使用的是Ajax异步查询

这是界面代码: ? function shua(){             var id_array=new Array();         $('input[id="checkAll"]:checked').each(function(){         id_array.push($(this).val());//向数组中添加元素         });  //获取界面复选框的所有值              var chapterstr = id_array.join(',

在Servlet端获取html页面选中的checkbox值,request获取页面checkbox(复选框)值

html端代码: 适用人群: <input type="checkbox" name="crowd" value="幼儿">幼儿 <input type="checkbox" name="crowd" value="青少年">青少年 <input type="checkbox" name="crowd" value=&