聊聊 Layui监听单选框，下拉框，复选框等代码写法

最新推荐文章于 2024-07-25 21:45:55 发布

乌托邦的隐士

最新推荐文章于 2024-07-25 21:45:55 发布

阅读量784

点赞数 1

分类专栏：前端知识文章标签： jquery radiobutton

本文链接：https://blog.csdn.net/zysh888/article/details/105092051

版权

前端知识专栏收录该内容

2 篇文章 0 订阅

订阅专栏

最近在做Coral项目的时候遇到这样一个问题：Layui中怎么动态监听radio单选框的事件，下面先来看一段代码：

<html>
...
    <form>
        <input type="radio" name="type" value="1" title="菜单" checked>
        <input type="radio" name="type" value="2" title="按钮">
    </form>
....
</html>

<script>
    $('input[type=radio][name=type]').change(function() {
        alert($("input[name='type']:checked").val());
    });
</script>

以上<script>代码块是我们引用 jQuery常规写法，按道理是当你切换<html>部分的单选框时应该会alert出选中的值，但经项目调试后事实证明上面的JS部分代码是无效的！那么问题来了，为什么会不好使呢？这不是标准的 jQuery语法吗？

经过上网一番查询得到答案，固记录一下作为备忘。

因为使用了layui以后，单选框（以及复选框、下拉框等等）要用form提供的监听语法来实现。原因是经过layui的form组件处理之后，你看到的“单选框”、“复选框”、“下拉选择”，这些被美化的东东，实际上不是原始的节点，原始的节点都到幕后去了，所以绑定在原始节点上事件是没用的。

【Layui官方建议】：既然使用组件，那就充分利用它，既然它都给你提供了这些表单元素对应的事件了，那就用它的事件监听方式就可以了。

Layui语法写法如下：

<html>
...
    <form>
        <input name="type" type="radio" lay-filter="rightType" value="1" title="菜单" checked/>
        <input name="type" type="radio" lay-filter="rightType" value="2" title="按钮"/>
    </form>
....
</html>

<script>
    layui.use(['form'], function(){

        var form = layui.form();
    
        //这里'radio(rightType)' 一定要注意 rightType是filter 请在上方input增加lay-filter属性
        form.on('radio(rightType)', function(data){
          console.log(data.elem); //得到radio原始DOM对象
          console.log(data.value); //被点击的radio的value值
        });  
    });
</script>