zoukankan      html  css  js  c++  java
  • 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=" 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>
    
  • 相关阅读:
    Codeforces 379 F. New Year Tree
    「NOI2018」屠龙勇士
    「NOI2018」归程
    深入理解Java枚举类型(enum)
    2018.6.9-学习笔记
    String、StringBuffer与StringBuilder介绍
    HashMap和HashTable到底哪不同?
    HashMap详解
    List,Set和Map详解及其区别和他们分别适用的场景
    Java中高级面试题(1)
  • 原文地址:https://www.cnblogs.com/wybshyy/p/13783635.html
Copyright © 2011-2022 走看看