`
郑云飞
  • 浏览: 813861 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

layui单选框选中事件

 
阅读更多

<input type="radio" name="sex" lay-filter="erweima" value="二维码" title="二维码">
<input type="radio" name="sex" lay-filter="erweima" value="图片" title="图片" >

layui.use('form', function () {
var form = layui.form;        
form.on('checkbox(switchTest)', function (data) {
            alert("哈哈哈");
            layer.tips('开关checked：' + (this.checked ? 'true' : 'false'), data.othis);
            //layer.tips('开关checked：' + (this.checked ? 'true' : 'false'), data.othis)
        });

        form.on('radio(erweima)', function (data) {
            alert(data.elem);
            //console.log(data.elem);
            alert(data.value);//判断单选框的选中值
            //console.log(data.value);
            //alert(data.othis);
            //layer.tips('开关checked：' + (this.checked ? 'true' : 'false'), data.othis);
            //layer.alert('响应点击事件');
        });

        form.on('submit(formDemo)', function (data) {
            //layer.msg(JSON.stringify(data.field));
            alert("哈哈哈");
            return false;
        });

        form.render();
        //各种基于事件的操作，下面会有进一步介绍
    });

 

切记两点：

  1. form.on('radio(erweima)', function (data) {
    alert(data.elem);
    //console.log(data.elem);
    alert(data.value);//判断单选框的选中值
    //console.log(data.value);
    //alert(data.othis);
    //layer.tips('开关checked：' + (this.checked ? 'true' : 'false'), data.othis);
    //layer.alert('响应点击事件');
    });
    这是单选框的点击事件
    2.放在layui.use里面。
    3.别忘了引入： <script type="text/javascript" src="../layer/layer.js"></script>
    <script type="text/javascript" src="../layui/layui.js"></script>
    4.有时候，如果layerjs,放在layui的后面，F12会有报错的。

 

编辑页面，单选框初始化复制

 

/*DOM还没更新*/
that.$nextTick(function(){
    /*DOM更新了*/
var id=that.content.elecContId;
    if(''!=id&&null!=id){
        $("#"+id).find('div').first().attr('class','layui-unselect layui-form-radio layui-form-radioed');
        $("#"+id).find('div').first().html('<i class="layui-anim layui-icon layui-anim-scaleSpring"></i>');
    }


})

 

vue v-for循环渲染完毕在执行方法

 

在项目时用到了一些插件，比如这次用了下拉菜单插件。

这个插件需要实例化，而下拉框的数据是通过ajax来获取的，然后在用 v-for 渲染数据，再次遇到了一个问题。

就是等插件实例化完毕，数据却还没渲染完毕，所以这就出现一个bug。出现bug解决掉。

第一种解决方法： settimeout

 setTimeout(function() {
    //实例初始化
  },100)

但是这种方法有一个缺点，就是不确定 数据 什么时候渲染完毕。

第一种情况： 假设10毫秒渲染完毕，但是setTimeout需要等100毫秒，浪费了90毫秒。

第二种情况：假设数据需要 200 毫秒执行完毕，但是 100毫秒就执行了 实例初始化，BUG又出现了。

总而言之这种方法不是我们想要的，看第二种方法。

第二种解决方法： watch + vm.nextTick

这两种方法是 vue 的属性和方法。

watch： 监听某一个data数据发生变化就执行方法。

例：

复制代码
 vm = new Vue({
    el:'.app',
    data: {
      a: '1',
    },
    watch: {
      a: function() {
        console.log('a的数据发生变化'+this.a);
      }
    }
  })
  vm.a = '2';
复制代码

data 里面的a属性发生了变化变成成了2，就触发了watch的a方法。console.log（a的数据发生变化2）；

nextTich: 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

例：

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div @click="ceshi()">{{ a }}</div>
</body>
<script type="text/javascript">
  vm = new Vue({
    el:'.app',
    data: {
      a: '1',
    },
    methods:{
      ceshi(){
        a = 2;
        /*DOM还没更新*/
        this.$nextTick(function(){
          /*DOM更新了*/
        })
      }
    }
  })
</script>
</html>
复制代码

$nextTick 里面DOM更新是指页面上的数据是最新的数据。而不是data的a数据更新了。

知道这两种属性之后。我们开始解决一下BUG吧。

先贴完整代码：

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <setion>
      <option value="1" v-for="(item,key) in arr" :key="key">{{ item }}</option>
    </setion>
</body>
<script type="text/javascript">
  vm = new Vue({
    el:'.app',
    data: {
      arr: [],
    },
    wathc:{
      arr: function() {
        this.$nextTick(function(){
          /*现在数据已经渲染完毕*/
        })
      }
    },
    mounted:function() {
      var that = this;
      axios.get('url',{
        params:{
          link: '',
        }
      }).then(function(res){
          that.arr = res;
      })
    }
  })
</script>
</html>
复制代码

 好，这就是我们解决的完整代码。 解释一下什么意思。

分享到：
| docker 日常使用遇到的问题汇总
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    layui 实现自动选择radio单选框(checked)的方法

    这是因为Layui的一些模块需要根据新的DOM状态来进行相应的操作，比如对新选中的单选框应用样式。所以，在设置完单选框状态之后，调用form.render()是必要的步骤。 总结来说，这篇文章通过一个具体的案例，向我们...

    layui清除radio的选中状态实例

    通过本文的介绍，我们了解了如何利用layui框架结合JavaScript实现清除radio按钮选中状态的功能。这涉及到对DOM元素属性的操作以及对Layui框架API的使用。通过实践，开发者可以进一步加深对HTML表单控件和JavaScript...

    单选框和复选框样式

    在网页设计中，单选框（Radio Button）和复选框（Checkbox）是常见的用户界面元素，用于收集用户的选择信息。这些元素的样式通常由浏览器默认提供，但往往较为单一，不能满足设计师对于美观和品牌一致性的需求。本...

    取消选中单选框radio的三种方式示例介绍

    本文提供了三种取消选中radio的方式，代码示例如下: 本文依赖于jQuery,其中第一种，第二种方式是使用jQuery实现的，第...单选按钮取消选中的三种方式&lt;/title&gt; [removed] [removed] [removed] $(function(){ // v

    浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)

    在这篇文章中，作者主要讲解了如何在Web前端开发过程中监听单选框（radio）状态的改变事件，并分别介绍了在不使用任何框架、使用jQuery框架以及使用layui框架时的实现方法。本文将详细解析这些知识点。 首先，监听...

    layui radio性别单选框赋值方法

    在成功给单选按钮赋予了checked属性之后，需要调用layui的form.render方法来渲染页面上的组件，确保单选框的选中状态能够正确显示。这一步是不可或缺的，否则单选框即使被赋予了正确的属性也不会更新界面。 知识点...

    layui table中的列为checkbox 使layui中table表格中的列单元格显示为单选框checkbox

    总之，layui的表格组件允许我们灵活地定制列的显示方式，通过`type: 'checkbox'`可以轻松实现单选框列。结合监听事件和自定义逻辑，我们可以构建出符合业务需求的交互式表格。希望这篇文章能帮助你更好地理解和应用...

    layui 数据表格复选框实现单选功能的例子

    //点击选中(单选) //单击行勾选checkbox事件 $[removed]("click",".layui-table-body table.layui-table tbody tr", function () { var index = $(this).attr('data-index'); var tableBox = $(this).parents('....

    layui 监听表格复选框选中值的方法

    总结，layui监听表格复选框选中值的方法主要包括：初始化表格数据、监听复选框事件、处理选中和取消操作，以及异步请求后台。通过这种方式，我们可以灵活地根据用户的交互更新数据并传递给服务器，实现了动态数据...

    Layui的eleTree树式选择器，分单选和多选，带搜索功能

    1. **单选模式**：在单选模式下，用户只能选择一个节点，当选中一个节点时，之前选中的节点会自动取消选中。这种模式通常用于需要明确唯一选择的场景。 2. **多选模式**：多选模式允许用户同时选择多个节点，可以...

    Layui表格选中指定行的radio单选框并滚动到该行的实现代码

    layui table有多行数据，通过外部输入内容，需要定位到指定行，选中改行，对改行进行操作。 实现效果： HTML代码： &lt;body&gt; &lt;div class=layui-fluid&gt; &lt;input type=text id=txt_id /&gt; &lt;table class=...

    layui中使用jquery控制radio选中事件的示例代码

    本篇文章将详细讲解如何在Layui中结合jQuery来控制Radio单选框的选中事件。 首先，Radio按钮在HTML中用于提供一组互斥的选择项，用户只能选择其中一个。在Layui中，我们可以利用其内置的表单模块（form）来处理...

    layui+ztree下拉树，支持单选和多选

    在`ztree`初始化完成后，需要监听用户的选中操作，并根据单选或多选模式更新`layui`下拉框的值。同时，为了提高用户体验，可以添加搜索功能，让用户能够快速定位到目标节点。 这个下拉树组件适用于多种场景，比如在...

    基于layui实现带搜索功能的树形穿梭框

    本项目“基于layui实现带搜索功能的树形穿梭框”是layui框架的一个扩展应用，旨在提供一种高效的数据筛选和选择方式，尤其适用于需要在大量数据中进行分类和关联操作的场景。 穿梭框（Transfer）是一种常见的UI组件...

    layui之table checkbox初始化时选中对应选项的方法

    本文将详细讲解如何在layui的table初始化时设置checkbox选中对应的选项。 首先，layui table组件在渲染数据时，需要从后台获取数据并将其格式化为特定的结构。对于包含checkbox的表格，每个行数据需要包含一个字段...

    layui复选框的全选与取消实现方法

    本文将详细讲解如何使用 Layui 实现复选框的全选与取消功能，这对于用户交互和数据筛选至关重要。 首先，我们来看一下 HTML 结构。在给出的示例中，可以看到有两个级别的复选框：一级复选框（全选/取消）和二级复选...

    jQuery基于layui插件制作checkbox复选框选中代码

    在本文中，我们将深入探讨如何使用jQuery和layui插件来创建功能丰富的checkbox复选框，包括权限范围的多选、单选以及全选操作。同时，我们也将关注于父级和子级复选框之间的联动关系，即父级选中时子级全部选中，而...

    layui的table单击行勾选checkbox功能方法

    在本文中，我们将深入探讨如何在layui框架中实现表格（table）单击行时自动勾选或取消勾选复选框（checkbox）的功能。layui是一个轻量级的前端UI框架，提供了一系列丰富的组件，包括表格，用于数据展示和交互。下面...

Magicbox
Global site tag (gtag.js) - Google Analytics