Layui checkbox 数据获取、提交、回显，位运算解决多选问题

  最近公司的老项目需要扩展，多选框一堆if-else逻辑给我整懵了，刚好有时间重构了一下。

  多选框的取值用2的n次幂代替，提交数据时候用“或“运算选中值；数据回显时用“与”运算判断选项是否选中，这样以后添加选项时只需要修改html的checkbox部分代码。

HTML代码

<!--
<link rel="stylesheet" href="layui.css"  media="all">
<script src="jquery.min.js" type="text/javascript"></script>
<script src="layui.js" charset="utf-8"></script>
-->
<form class="layui-form layui-form-pane" action="javascript:;">
	<div class="layui-form-item">
		<label class="layui-form-label">支持平台</label>
		<div class="layui-input-block">
			<input type="checkbox" name="platform" value="1" title="安卓">
			<input type="checkbox" name="platform" value="2" title="苹果">
			<input type="checkbox" name="platform" value="4" title="Web">
			<input type="checkbox" name="platform" value="8" title="Windows">
			<input type="checkbox" name="platform" value="16" title="Mac">
		</div>
	</div>

	<div class="layui-form-item" style="width: 100%;text-align: left;margin-top: 20px;">
		<div class="layui-input-block" style="margin: 0">
			<button type="submit" class="layui-btn" lay-submit="" lay-filter="formDemo">修改</button>
		</div>
	</div>
</form>

数据提交

        form.on('submit(formDemo)', function(data){
            //获取多选框选定值,按位或运算
            var platform = 0;
            $("input[name='platform']").each(function(){
                if($(this).is(":checked")) {
                    platform = platform | $(this).val();
                }
            });
            data.field.platform = platform;
            var index = layer.load(0,{shade: [0.7, '#393D49']}, {shadeClose: true}); //0代表加载的风格，支持0-2
            $.ajax({
                url:'app-alt',
                method:'post',
                data:data.field,
                dataType:'JSON',
                success:function(data){
                    layer.close(index);
                    if(data.code == 0){
                        layer.msg('修改成功');
                    } else {
                        layer.msg(data.message);
                    }
                },
                error:function (data) {
                    layer.close(index);
                    layer.msg(data);
                }
            }) ;
        });

数据回显

    $(document).ready(function(){
        var id = getQueryVariable("id");
        $.ajax({
            url:'app-info',
            method:'get',
            data: 'id=' + id,
            dataType:'JSON',
            success:function(data){
                //{"hint":null,"code":0,"message":null,"obj":{"id":24,"platform": 3}}
                if(data.code == 0){
                    //按位与运算判断是否选中
                    $("input[name='platform']").each(function(){
                        if (($(this).val() & data.obj.platform) == $(this).val()) {
                            $(this).attr("checked",true);
                        }
                    });
                    //重新渲染
                    var form = layui.form;
                    form.render();
                } else {
                    layer.msg(data.message);
                }
            },
            error:function (data) {
                layer.msg("加载失败");
            }
        }) ;
    });

效果

后端判断选项是否被选中

public enum Platform {

    ANDROID(1), IOS(2), WEB(4), WINDOWS(8), MAC(16);

    private int value;

    public int value() {
        return this.value;
    }

    Platform(int value) {
        this.value = value;
    }

    private static int all() {
        return ANDROID.value|IOS.value|WEB.value|WINDOWS.value|MAC.value;
    }

    /**
     * @param selectPlatform 选择的平台
     * @param platforms  要参与判断的平台数组
     * @return 当选择的平台包含所有参与判断的平台时返回true
     * */
    public static boolean contain(int selectPlatform, Platform... platforms) {
        int x = 0;
        for (Platform p : platforms) {
            x = x | p.value;
        }
        return ((x & selectPlatform) == x);
    }

    /**
     * @param selectPlatform 选择的平台
     * @param platforms  要参与判断的平台数组
     * @return 当且仅当选择的平台只有参与判断的所有平台不包含其他平台时返还true
     * */
    public static boolean onlyContain(int selectPlatform, Platform... platforms) {
        int x = 0;
        for (Platform p : platforms) {
            x = x | p.value;
        }
        return ((all() & selectPlatform) == x);
    }

}