精华内容
下载资源
问答
  • layui动态生成复选框并向后端传递选中复选框的值

    layui动态生成复选框及向后端传递选中复选框的值

    一、动态生成复选框

    问题:将数据库的标签在前端以复选框的形式展示出来,如下图所示

    在这里插入图片描述

    解决:
    <div class="layui-form-item">
                <label class="layui-form-label">兼职标签</label>
                <div class="layui-input-block" id="jobTypeDiv"></div>
                <div class="layui-form-mid" style="color: red;margin-left: 115px;">*备注:可多选,前三个标签需且仅需选择一个</div>
            </div>
    
    <script type="text/javascript">
    
    success: function () {
                        var div = $("#jobTypeDiv");
                        $("#dataFrm")[0].reset();//清空表单
                        div.html("");
                        //进入/labelType/loadAllLabelType的方法,返回的objs是一个list集合,集合中的每个元素均为Label实体类(包含id和label两个属性)
                        $.get("/labelType/loadAllLabelType", function (objs) { 
                            var labelTypes = objs.data;
                            $.each(labelTypes, function (index, item) {
                                if (index === 0) { //默认第一个是被选中的,设置为checked="checked"
                                    div.append('<input type="checkbox" checked="checked" name="labelType"  value="' + item.id + '" title="' + item.label + '">');
                                } else {
                                    div.append('<input type="checkbox" name="labelType" value="' + item.id + '" title="' + item.label + '">');
                                }
                            });
                            form.render("checkbox");
                        });
                    }
    </script>
    

    其中每个复选框选项的 value 值为 Label.id,title 为 Label.label

    二、向后端传递选中复选框的值

    问题:将选中复选框的值传递到后端,如下图所示

    在这里插入图片描述

    解决:
    //监控提交事件
            form.on("submit(doSubmit)", function (data) {
                
                var labelArray = $('input[name="labelType"]');
                //获取input[name="labelType"]的值
                var labels = [];
                for (k in labelArray) {
                    if (labelArray[k].checked) {
                    //获取所有选中的复选框,并将其值放入数组中
                        labels.push(labelArray[k].value);
                    }
                }
                //替换 data.field.labels的数据
                data.field.labels=labels;
    
                $.post("/partTime/addAndUpdatePartTime", data.field, function (res) {
                    if (res.code === 200) {
                       layer.msg(res.msg);
                    } else {
                        layer.msg(res.msg, {icon: 2}, {time: 2000})
                    }
                    tableIns.reload();
                });
                return false;
            });
    

    在写实体类的时候没有考虑到 labels 这个属性,是后来才加上的

     /**
      * 方便前端传输复选框的数据
      */
        private String labels;
    

    在后端就可以获取这个属性的值,再进行字符串的剪切等操作

    //以","切割前端传递的复选框数据(以JSON字符串类型传递过来的)
    String[] split = partTimeDetailsVo.getLabels().split(",");
    System.out.print("split = ");
    for (String s : split) {
       System.out.print(s);
    }
    //输出结果为“split = 34578”
    

    以上是个人在学习过程中的一些理解和记录,如有错误,欢迎指正批评~~~

    参考博客:https://blog.csdn.net/weixin_39106990/article/details/106103755

    展开全文
  • 这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、...
     <div>
                <input type="checkbox" class="choose"/>复选框
            </div>
            <script type="text/javascript">
                $(".choose").click(function(){
                    if(this.checked==true){
                        console.log("复选框被选中了")
                    }else{
                        console.log("复选框未被选中")
                    }
                })
            </script>
    ``
    
    当checked==true的时候,复选框被选中,如果checked==false,则复选框未被选中。下面是用js写:
    <div>
                
                <input type="checkbox" id="choose"/>复选框
            </div>
            <script type="text/javascript">
                var choose=document.getElementById("choose");
                choose.onclick=function(){
                    if(this.checked==true){
                        console.log("复选框被选中了")
                    }else{
                        console.log("复选框未被选中")
                    }
                }
            </script>
    
    展开全文
  • 这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、...

    boostrap table 中复选框选中后,翻页操作会导致上一页选中的丢失,api中的 bootstrapTable(‘getSelections’); 只能拿到当前页的复选框,而现在希望翻页之后再回到当前页的时候被勾选的复选框不会丢失.

    首先

    1. 定义一个全局的数组 ,存储你选中的row的唯一标识:此处我用的唯一标识是ldbm,因为我之后需要用到,勾选实现导出,你们可根据自己的需求来.
      在这里插入图片描述

    2. 加载数据源时: 配了基础的条件后,要设置maintainSelected: true, //默认false,设置为“true”可在翻页时保留所选行
      在这里插入图片描述3. boostrap table中你要展示的字段: 把你的复选框加上一个方法来判断当前row的唯一标识是否存在在全局数组中.在这里插入图片描述

    3. 最后这两个方法需要注意括号和位置: 注意自己的括号是否写对了位置,要不然找起来很麻烦, 这两个方法要放在加载table 的方法中而不是放在加载数据源的方法中;
      在这里插入图片描述

    4. 总结: 亲测可用! 页面重新加载table时需将全局数组置为空!
      1.第一页勾选三行,切换到第三页
      在这里插入图片描述
      2.切换到第三页勾选三行
      在这里插入图片描述
      3.回到第一页
      在这里插入图片描述

    展开全文
  • 在vue的实际开发过程中,我们如何将以选中的值直接渲染到页面中,这次主要说的是多选框和下拉列表的实现: 测试多选渲染: <input type=checkbox name=hobby :value=item.id :checked=loopsss.indexOf(item...
  • 非常好用的复选框选中的个数统计 及 js验证码 判断表单是否有选择,没有就不提交。代码非常简洁,个人写网站时候常用的有力帮手,自己可以下载来按需修改,不好用你找我要分。
  • 修改复选框样式

    千次阅读 2018-02-06 11:38:40
    使用渐进增强的方式美化复选框样式 复选框 Checkbox 是 Web 应用常用控件,随处可见,原生的复选框控件一般就像下面这样: 选中状态 未选状态 这取决于操作系统和浏览器,有些时候,这种样子并不能满足设计...

    使用渐进增强的方式美化复选框样式

    复选框 Checkbox 是 Web 应用常用控件,随处可见,原生的复选框控件一般就像下面这样:

    选中状态 未选状态

    这取决于操作系统和浏览器,有些时候,这种样子并不能满足设计要求,这时需要更为精致的复选框样式。以往只有少数浏览器才支持对这类控件应用样式,比如拿到这样一张设计图:

    blue blue.png

    在过去,想要通过简单地修改样式达成这种设计效果根本不行,不过,现在借助强大的 CSS3 属性 appearance 可以对该类控件有空前的样式控制能力:

    input[type="checkbox"] {
      -webkit-appearance: none;
    }
    

    这样设置该属性值为 none 就去掉了复选框原有的呈现方式,变成了一个普普通通的元素,然后就可以为之应用样式了,添加如下样式:


    input[type="checkbox"] {
      -webkit-appearance: none;
      background: #fff url(i/blue.png);
      height: 22px;
      vertical-align: middle;
      width: 22px;
    }
    

    通过结合使用状态伪类选择器 :checked 可以为选中状态下的 checkbox 设置不同的样式,用以从视觉上区别:

    input[type="checkbox"]:checked {
      background-position: -48px 0;
    }
    

    此时点击复选框,可以看到复选框样式的变化效果,另外,根据那张设计图片所示还得加上获取焦点,禁用等状态的样式:


    input[type="checkbox"]:focus,
    input[type="checkbox"]:hover {
      background-position: -24px 0;
      outline: none;
    }
    
    input[type="checkbox"]:checked {
      background-position: -48px 0;
    }
    
    input[type="checkbox"][disabled] {
      background-position: -72px 0;
    }
    
    input[type="checkbox"][disabled]:checked {
      background-position: -96px 0;
    }
    

    因为图片已经事先合并成一张了,简单修改一下 background-position 就可以了,同时前面几个选择器的优先级(权重)一样,所以书写顺序很重要。

    兼容性

    目前只兼容 Webkit 系列浏览器;虽然 Firefox 也实现了替代的 -moz-appearance 属性,不过控件原有的背景颜色、边框样式无法修改,暂时也不大好用;IE 系列暂时不支持该属性,更详细的兼容情况查看 Caniuse/appearance。因此需要为 IE 浏览器清除掉背景图片的影响:


    input[type="checkbox"] {
      background: #fff url(i/blue.png);
      background: none\0;
      *background: none;
      ...
    }
    

    为了兼容更多的主流浏览器,需要寻求另外的解决方案,在所有主流浏览器里,点击关联某个复选框的 label 时,产生的效果和点击元素自身相同,会切换复选框控件的选中状态。浏览器的这种行为给了我们一个至关重要的挂钩,既然能依靠 label 元素来控制原生复选框的状态,那么就可以不必直接操作实际的复选框元素,而把操作和样式都转移到与之关联的 label 元素上去:

    <input id="example" type="checkbox">
    <label for="example"></label>
    

    确保 label 元素的 for 属性的值和复选框 input 的 id 值一致,同时将 label 元素放置于 input 之后,这样 CSS 可以通过相邻兄弟选择器(Adjacent sibling selector)定位到这个 label 元素并为之应用样式:


    input[type="checkbox"] + label:before {
      background: #fff url(i/blue.png);
      content: " ";
      height: 22px;
      left: 0;
      position: absolute;
      width: 22px;
    }
    

    有了样式化的 label 元素来提供交互,原生的 checkbox 控件就显得有点多余了,虽然可以用 display: none 把它隐藏掉,不过隐藏后的表单元素是不能获得焦点的,所以最好的方式还是用 label 元素把它遮住,这样既能支持键盘交互,同时当图片加载失败的时候,又能保证原生的控件可用:


    input[type="checkbox"] {
      box-sizing: border-box;
      left: 4px;
      margin: 0;
      padding: 0;
      position: absolute;
      top: 3px;
    }
    

    图片要足够大能将原生的 checkbox 控件完全遮挡住,因为这里用到了绝对定位,所以需要增加一个定位参照:


    <!-- HTML -->
    <div class="checkbox">
      <input id="exampleCheckbox" type="checkbox">
      <label for="exampleCheckbox"></label>
    </div>
    
    /* CSS */
    .checkbox {
      min-height: 24px;
      padding-left: 24px;
      position: relative;
    }
    

    左边预留内边距是为了排版更美观,同时,和之前一样,搭配上其它状态下的样式:


    input[type="checkbox"]:focus + label:before,
    input[type="checkbox"] + label:hover:before {
      background-position: -24px 0;
    }
    
    input[type="checkbox"]:checked + label:before {
      background-position: -48px 0;
    }
    
    input[type="checkbox"][disabled] + label:before {
      background-position: -72px 0;
    }
    
    input[type="checkbox"][disabled]:checked + label:before {
      background-position: -96px 0;
    }
    

    兼容性

    只要支持 CSS3 selectors 的浏览器基本上都能兼容,同时具备原生控件的绝大多数交互特性。IE 8 不支持 :checked 伪类选择器,将伪元素 :before 修改为双冒号 ::before 可以去掉对 IE 8 的影响:

    input[type="checkbox"] + label::before { ... }
    

    关于伪元素生成内容的兼容性见 CSS Generated content for pseudo-elements。诚然,上面的方法假设了支持 :checked 伪类选择器的浏览器同时也支持双冒号伪元素写法,而不支持的浏览器则都不支持,这是一种不太好的方式,这种假设事实上也是不正确的,造成了部分老旧浏览器不可用的问题,如果使用 :not() 选择器则更为合理,使用 :not(:checked) 来为未选中的控件添加样式,:not():checked 同属一个规范 css3-selectors,兼容性应该一致 CSS3 selectors。不过写法有点变化,:checked:not(:checked) 都需要添加上基本的样式:


    input[type="checkbox"]:checked + label:before,
    input[type="checkbox"]:not(:checked) + label:before {
      background: #fff url(i/blue.png);
      content: " ";
      height: 22px;
      left: 0;
      position: absolute;
      width: 22px;
    }
    
    input[type="checkbox"]:not(:checked):focus + label:before,
    input[type="checkbox"]:not(:checked) + label:hover:before {
      background-position: -24px 0;
    }
    
    input[type="checkbox"]:checked + label:before {
      background-position: -48px 0;
    }
    
    input[type="checkbox"][disabled]:not(:checked) + label:before {
      background-position: -72px 0;
    }
    
    input[type="checkbox"][disabled]:checked + label:before {
      background-position: -96px 0;
    }
    

    查看简单示例,对于那些并不支持 :checked 伪类选择器的浏览器(比如 IE 8),则可以借助 javaScript 来根据控件状态修改真正的 class 属性达到区分不同状态的目的,比如根据是否被选中来添加或删除一个 checked 的 class:


    // jQuery
    $('input[type="checkbox"]').on('change', function() {
      $(this)[$(this).prop('checked') ? 'addClass' : 'removeClass']('checked');
    });
    
    /* CSS */
    input[type="checkbox"].checked + label:before { ... }
    

    有了前面的基础,要制作类似于开关按钮的控件也是非常简单的了,还是熟悉的结构:

    <div class="checkbox">
      <input id="example" type="checkbox">
      <label for="example">Check</label>
    </div>
    

    首先勾勒出开关的形状,一个圆角矩形中间放一个圆形按钮:


    input[type="checkbox"]:checked + label,
    input[type="checkbox"]:not(:checked) + label {
      background-color: #e0e0e0;
      border-radius: 24px;
      cursor: pointer;
      display: inline-block;
      height: 24px;
      position: relative;
      text-indent: -9999px;
      width: 48px;
    }
    
    input[type="checkbox"]:checked + label:after,
    input[type="checkbox"]:not(:checked) + label:after {
      background-color: #fff;
      border-radius: 20px;
      content: " ";
      height: 20px;
      left: 2px;
      position: absolute;
      top: 2px;
      width: 20px;
    }
    

    选中的效果只要简单修改下外框的背景色和中间按钮的位置就行:


    input[type="checkbox"]:checked + label {
      background-color: #8c8;
    }
    
    input[type="checkbox"]:checked + label:after {
      left: 26px;
    }
    

    不过这种跳跃式变化实在是太生硬了,添加点过渡效果,看上去更平滑:


    input[type="checkbox"]:checked + label,
    input[type="checkbox"]:not(:checked) + label {
      -webkit-transition: background-color 0.3s;
              transition: background-color 0.3s;
    }
    
    input[type="checkbox"]:checked + label:after,
    input[type="checkbox"]:not(:checked) + label:after {
      -webkit-transition: left 0.3s;
              transition: left 0.3s;
    }
    

    点击就能看到效果,对于中间的按钮部分使用 CSS3 Transforms 来替代 left 效果更好,速度更快:


    input[type="checkbox"]:checked + label:after,
    input[type="checkbox"]:not(:checked) + label:after {
      -webkit-transition: left -webkit-transform 0.3s;
           -o-transition:           -o-transform 0.3s;
              transition: left         transform 0.3s;
    }
    
    input[type="checkbox"]:checked + label:after {
      left: 26px;
      -webkit-transform: translateX(24px);
          -ms-transform: translateX(24px);
           -o-transform: translateX(24px);
              transform: translateX(24px);
    }
    

    不支持 CSS3 Transforms 的浏览器仍然可以看到背景色的变化,不影响可用性,详见 CSS3 Transforms。关于性能问题,请参考 High Performance Animations。快速点击“控件”会因选中效果造成不能切换状态的情况,所以去掉“控件”可以被选中的能力:

    input[type="checkbox"]:checked + label,
    input[type="checkbox"]:not(:checked) + label {
      (-prefix-)user-select: none;
    }
    

    这里的浏览器厂商前缀根据需要替换成相应的,查看简单示例。当然还需要提供聚焦以及禁用等状态的样式,就不在这里重复了。以上所有技术可同时适用于单选框(radio)。


    转自原博:http://www.cnblogs.com/xyzhanjiang/p/3989836.html?utm_source=tuicool&utm_medium=referral


    展开全文
  • 清空复选框值 整个html元素清空 再重新调用方法生成 $("#updateRoleCheck").html("" ); // 加载修改角色复选框 updateRoleCheck(id); // 打开分配角色模态框 $("#sysUserRoleModal").modal('show' ); } ...
  • 无标题页 //单选与全选的判断 function check(e, allName){ var all = document.getElementsByName(allName)[0]; //获取全选复选框 if(!e.checked){ //没被选中全选复选框置为false; all.checked
  • //获取下拉框选中的值 var ninth= "${student.ninth}"; $("#ninth").val(ninth); var cname= "${student.cname}"; $("#cname").val(cname); }) //修改 function toUpdate(){ var s=''; $...
  • 【问题】用Adobe Acrobat DC生成PDF模板在java后端使用form.setField(name, value)设置复选框选中时,复选框内显示的是x而不是√,更改Adobe Acrobat DC复选框的勾选样式依然如此,在Adobe Acrobat DC预览时候样式...
  • 最近工作中需要根据一些患者信息生成对应的注册表,原模板是通过pdf 官方的Adobe Acrobat 设计的, 生成后在wps或者adobe中可以正常显示✔ 但是在浏览器中显示的是× 如下图 AcroFields form = stamp.getAcroFields()...
  • 在Spring MVC中, <...用于呈现多个复选框,但复选框值是在运行时生成的。 在本教程中,我们向您展示了三种不同的呈现HTML复选框字段的方式: 1. <form:checkbox /> –单个复选框 生成...
  • vue 根据后台数据动态获取复选框

    千次阅读 2020-11-10 15:40:11
    vue 根据后台数据动态获取复选框 <template> <div id="Demo"> <el-form ref="form" label-width="100px"> <el-form-item label="设备名称"> <div class="check-group" v-for="...
  • 原贴地址:...可以改写成ajax动态获取,这里是写死了几个选项,做个示例,怎么样动态生成下拉框,复选框,单选框,并默认选中 在编辑,查看页面我们经常需要这么做。 1.html 代码如下: <for...
  • 2、单击table表格tr行勾选radio功能: //点击整行表格中的tr将选中单元格的单选按钮 $('.DetailDiv').on("click",".layui-table-body table.layui-table tbody tr", function () { /*当单击表格行时,把单选按钮设...
  • JSF 2复选框示例

    2020-05-27 07:52:04
    默认情况下,将选中“ favNumber3”复选框,“ Number 1”和“ Number 3”值。 下载源代码 下载它– JSF-2-Checkboxes-Example.zip (10KB) 参考 JSF JavaDoc JSF JavaDoc 标签: 复选框 jsf2 翻译自: ...
  • JSP通过遍历数组获取复选框的值

    千次阅读 2018-05-21 21:17:08
    JSP通过遍历数组获取复选框的值 首页代码 *" pageEncoding="utf-8"%> String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort...
  • 当CSS 最初出现时,它对表单元素的样式控制力是...不幸的是,复选框和单选框不在此列。直到今天,这两种控件在绝大多数浏览器中仍然是几乎或完全无法设置样式的。&lt;!DOCTYPE html&gt; &lt;html la...
  • 怎么在html中创建复选框

    千次阅读 2020-05-11 00:01:09
    语法:** **定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。
  • 复选框列的显示,靠在js内表格的加载 1.singleSelect:false ,允许多选 2.idField 列必须正确,否则可能会影响到多选的功能(亲身经验) 3.加一列复选框列,用于选择 表格添加数据行 $('#product_table').datagrid...
  • Itext填写pdf中的复选框

    千次阅读 2018-09-13 12:13:00
    使用Acrobat制作模板,在赋值的时候发现一个问题,对于模板中的复选框CheckBox,使用了默认导入值“是”,结果复选框内显示的是一个叉而不是一个√。 翻看了很多的资料,也找不到解决的方法,如果有哪位大神知道的,...
  • itext填写pdf中的复选框

    千次阅读 热门讨论 2018-07-04 15:25:21
    1.问题:用acrobat生成的模板在后台使用form.setField(name, value)这个方法让复选框选中时,复选框内显示一个x而不是√2.解决:com.itextpdf的版本改到5.2.1以后
  • 包含文本框,密码框,单选框,复选框等 下面是表单讲解 类型:type="text" type="password" 密码框 type="radio" 单选按钮 注意:当type="radio" 时 应该有分组,即name的值应该相同。可以设置默认值,...
  • < form action= "" method= "post" > < input type= "hidden" name= "group_id" value= "{$group_id}" > < volist name= 'pandas' id= 'panda' > < tr ...用数组作为复选框的name值.
  • 使用django form生成复选框表格

    万次阅读 2014-02-26 11:28:31
    from django import forms ...遇到问题:相同过cleaned_data()函数获得form选中的选项,报错说没哟cleaned_data属性,后面发现要先调用is_valid()函数才能调用cleaned_data()获得数据。
  • layui获取页面checkbox复选框

    千次阅读 2019-04-19 17:45:47
    由于layui美化的复选框无法用form表单直接获取所选值,查了好多资料都无法实现,后来找到了一篇文章,发现可以,直接将美化的选中class找到,直接循环选中的对象循环值就可以得到了 参考文章:...
  • Itext填写pdf中的复选框对勾问题解决

    千次阅读 2019-07-25 18:48:53
    首先用Acrobat Pro工具将复选框的样式修改成勾形;导出值设为true data.put("self_way","true");将其设为true就可以啦 package com.pdf3; import java.awt.*; import java.io.ByteArrayOutputStream; ...
  • 需求实现:通过layui框架数据表格渲染方法解析出表格,然后根据表格复选框选中的值(id)来传递到后台,目前需要实现的是调用后台的文件下载接口; 由于下载接口不能直接使用ajax方法,所以就用的表单提交来实现...
  • 按以下步骤实现多选框功能: 1.在<el-form>标配中页面增加 <el-form> <el-form-item label="设备" prop="equipment"> <template> <el-checkbox-group v-model="zz" format="change...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,106
精华内容 4,042
关键字:

复选框选中生成表单