layuiradio选中详解

一、layuiradio选中的值

layuiradio组件是layui官方推出的单选框组件，可以用来表达单选的情况。layuiradio选中事件的触发方式有两种：一种是页面渲染时就选中，另一种是用户在页面操作后选中。

当页面渲染时需要选中某个layuiradio，只需要在html中给对应的radio元素添加checked=""属性即可。例如：

<input type="radio" name="sex" title="男" checked="">
<input type="radio" name="sex" title="女">

上面的代码中，男性单选框在页面渲染时就被选中了。

而当用户在页面操作后选中了某个layuiradio，那么我们可以在其onchange事件中获取到选中的值。

<script>
    layui.use('form', function(){
        var form = layui.form;
        
        form.on('radio(sex)', function(data){
            console.log(data.value); //被点击的radio的value值
        });
    });
</script>

上面的代码实现了当name为’sex’的radio元素被点击时，在控制台输出该元素的值。

二、layui复选框被选中事件

layuiradio的实现是基于layui.form组件的，而layui.form组件还包括了一些其他的表单元素类型，例如复选框checkbox。我们同样可以在复选框选中时实现事件的触发。

复选框的选中事件需要在页面中渲染时预先定义。下面的示例演示了在复选框被选中时，将选中的复选框的value值输出到控制台中。

<script>
    layui.use('form', function(){
        var form = layui.form;
        
        form.on('checkbox(like)', function(data){
            console.log(data.value); //被点击的checkbox的value值
        });
    });
</script>

三、layui多选框选中事件

与复选框不同，layuiradio不支持多选，但是layui.form组件提供了专门的多选框组件select。在选中时，我们同样可以实现事件的触发。

多选框的选中事件也需要在页面中渲染时就预先定义。下面的示例演示了在多选框被选中时，将选中的多选框的值输出到控制台中。

<script>
    layui.use('form', function(){
        var form = layui.form;
        
        form.on('select(city)', function(data){
            console.log(data.value); //被选择的option的value值
        });
    });
</script>

上面的代码中，选项框的选择事件被定义为了’city’，但在html中还需要给对应的select元素添加lay-filter="city"属性。

四、小结

以上就是layuiradio选中方面的详细介绍。通过上述示例，我们可以了解到在layuiradio选中时，无论是单选框、复选框还是多选框，都只需要在页面中定义对应的选中事件即可。同时，我们还可以在这些事件中获取到选中的值，为之后的逻辑处理提供便利。