layui form表单 根据输入框的值,选中单选框
时间: 2024-02-23 12:11:36 浏览: 73
可以通过监听输入框的输入事件,然后根据输入框的值来选中对应的单选框。以下是一个示例代码:
HTML代码:
```html
<form class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">输入框</label>
<div class="layui-input-block">
<input type="text" name="input" lay-verify="required" placeholder="请输入内容" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">单选框</label>
<div class="layui-input-block">
<input type="radio" name="radio" value="1" title="选项1">
<input type="radio" name="radio" value="2" title="选项2">
<input type="radio" name="radio" value="3" title="选项3">
</div>
</div>
</form>
```
JavaScript代码:
```javascript
// 初始化form表单
layui.use('form', function(){
var form = layui.form;
form.render();
// 监听输入框的输入事件
$('input[name="input"]').on('input', function(){
// 获取输入框的值
var val = $(this).val();
// 根据输入框的值选中对应的单选框
if (val === '1') {
$('input[name="radio"][value="1"]').prop('checked', true);
} else if (val === '2') {
$('input[name="radio"][value="2"]').prop('checked', true);
} else if (val === '3') {
$('input[name="radio"][value="3"]').prop('checked', true);
}
// 更新单选框的状态
form.render('radio');
});
});
```
上面的代码中,我们监听了输入框的输入事件,然后根据输入框的值选中对应的单选框,并更新单选框的状态。注意,要使用form.render('radio')来更新单选框的状态。
阅读全文