layui获取单选框的判断
时间: 2023-08-18 21:07:59 浏览: 52
在layui中获取单选框的判断,可以通过以下步骤完成:
1. 给单选框添加一个相同的name属性,例如:name="gender";
2. 使用layui的form模块获取表单元素,例如:var form = layui.form;
3. 使用form模块的on()方法监听表单提交事件,例如:form.on('submit(formDemo)', function(data){ ... });
4. 在事件处理函数中,通过data.field对象获取表单元素的值,例如:var gender = data.field.gender;
5. 对获取到的值进行判断,例如:if(gender == '男'){ ... }。
示例代码如下:
HTML代码:
```
<form class="layui-form" lay-filter="formDemo">
<div class="layui-form-item">
<label class="layui-form-label">性别</label>
<div class="layui-input-block">
<input type="radio" name="gender" value="男" title="男">
<input type="radio" name="gender" value="女" title="女">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="submitDemo">提交</button>
</div>
</div>
</form>
```
JavaScript代码:
```
var form = layui.form;
//监听表单提交事件
form.on('submit(formDemo)', function(data){
//获取单选框的值
var gender = data.field.gender;
//判断单选框的值
if(gender == '男'){
//执行操作
...
}else if(gender == '女'){
//执行操作
...
}
//阻止表单跳转
return false;
});
```
注意:在使用layui的form模块进行表单操作时,需要先引入layui.js和layui.css文件,并使用form.render()方法对表单进行渲染。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)