一、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选中时,无论是单选框、复选框还是多选框,都只需要在页面中定义对应的选中事件即可。同时,我们还可以在这些事件中获取到选中的值,为之后的逻辑处理提供便利。