一、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选中时，无论是单选框、复选框还是多选框，都只需要在页面中定义对应的选中事件即可。同时，我们还可以在这些事件中获取到选中的值，为之后的逻辑处理提供便利。
原创文章，作者：EQEN，如若转载，请注明出处：https://www.506064.com/n/132223.html
微信扫一扫 
支付宝扫一扫 