layui 单个获取复选框的状态或值,监听checkbox复选

此文章为单个获取。

批量获取示例在https://blog.csdn.net/wybshyy/article/details/106693049

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TemplateEdit.aspx.cs" Inherits="MyProject.YuanGongPingJia.TemplateEdit" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="/JS/layui/css/layui.css" rel="stylesheet" />
    <script src="/JS/jquery-3.4.1.js"></script>
    <script src="/JS/layui/layui.js"></script>
</head>
<body>
    <form class="layui-form" action="">


        <div class="layui-form-item" style="margin-top: 20px;">
            <label class="layui-form-label">
                模板名称
            </label>
            <div class="layui-input-block">
                <input type="text" id="TemplateName" name="title" required lay-verify="required" placeholder="请输入模板名称" autocomplete="off" class="layui-input" style="width: 200px;" />
            </div>
        </div>
        <blockquote class="layui-elem-quote layui-text">
            题目总分请勾选共105分,已勾选<span id="allfen">0</span>分
        </blockquote>
        <div class="layui-form-item" pane="">
            <label class="layui-form-label">模板题目</label>
            <div class="layui-input-block">
                <%=sbSubjects.ToString() %>
                <input type="checkbox" id="2" name="Subjects" value="10" lay-filter="subjects" lay-skin="primary" title="(10分)-是否爱公司" /></br>
                <input type="checkbox" id="3" name="Subjects" value="11" lay-filter="subjects" lay-skin="primary" title="(10分)-是否爱公司" /></br>
            </div>
        </div>
        <%--<div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary" onclick="toSubmit()">重置</button>
            </div>
        </div>--%>
        <input id="key" type="hidden" value="<%=templatesModel!=null?templatesModel.Id:0 %>" />
        <input id="hdsubs" type="hidden" value="<%=templatesModel!=null?templatesModel.TempSubjects:"," %>" />
    </form>

    <script>
        //Demo
        layui.use('form', function () {
            var form = layui.form;
            //注意:lay-filter="subjects"
            form.on('checkbox(subjects)', function (data) {
                //console.log(data.elem); //得到checkbox原始DOM对象
                //console.log(data.elem.checked); //是否被选中,true或者false
                //console.log(data.value); //复选框value值,也可以通过data.elem.value得到
                //console.log(data.othis); //得到美化后的DOM对象
                var cb = data.elem;
                var subid = $(cb).attr("id");//题目的ID
                var goufen = $(cb).attr("value");//题目分值
                var allfen = $("#allfen").text();//提示的已勾选的题目的总分
                var hdsubs = $("#hdsubs").val();//隐藏域中存放的题目集合以逗号隔开
                if (data.elem.checked) {//如果当前复选框改为选中状态
                    allfen = parseInt(allfen) + parseInt(goufen);
                    if (hdsubs.indexOf(","+subid + ",")<0) {
                        $("#hdsubs").val(hdsubs + subid + ",");
                    }
                }
                else {
                    allfen = parseInt(allfen) - parseInt(goufen);
                    if (hdsubs.indexOf(","+subid + ",") >= 0) {
                        hdsubs = hdsubs.replace(","+subid + ",",",");
                        $("#hdsubs").val(hdsubs);
                    }
                }
                
                $("#allfen").text(allfen);
                if (allfen>105) {
                    layer.msg('总分已达到105分,请评估是否继续。', { icon: 7 });
                }
            }); 
        });

    </script>

</body>
</html>

 

 

posted @ 2020-06-14 11:35  离。  阅读(339)  评论(0编辑  收藏