layui对表单元素都作了美化,比如下拉列表,单选框,多选框.对表单美化后相应元素的操作,其实是在layui处理过后的div上操作,不能真的反映在原始我们编写的表单的元素上.这也会出现一个问题,如果想用JS对表单做些预处理,怎么做?操作原始的元素并不会展现在layui处理过的表单中的,那我们就对layui处理过的表单动手
这里要提两个我用过的,一个是单选框,一个是下拉列表
* 单选框,layui美化后,对应的type=radio的input项隐藏,在input之后追加了一个div,里面用i标签美化,所以我们需要做的事找到目标单选框的临近i标签,然后触发它的click事件
* 下拉框,layui把下拉框美化成了一个dl,每一个option标签都变成了一个dd标签表示,其中value更改为lay-value属性,我们要做的就是找到下拉框对应的dl标签,将符合要求值lay-value的dd的click事件触发
完整代码：
<!DOCTYPE html>
<html>
<!-- 防止IE提示允许阻止的内容-->
<!-- saved from url=(0014)about:internet -->
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\"/>
<title>layui-form下单选框的监听问题</title>
<link rel=\"stylesheet\" type=\"text/css\" href=\"layui.css\" rel=\"external nofollow\" >
<script src=\"jquery.js\" type=\"text/javascript\"></script>
<script src=\"layui.js\" type=\"text/javascript\"></script>
<style>
.layui-form #layer-photos img {
max-width: 200px;
}
.layui-form .industryCheckbox li {
float: left;
width: 33%;
}
</style>
</head>
<body>
<!--头部logo以及登录注册开始-->
<div class=\"boxWrap\">
<p class=\"boxTitle\">投资需求</p>
<div class=\"formWrap\">
<form class=\"layui-form\">
<!-- 左右两列左侧容器 -->
<div class=\"form-left\">
<div id=\"openedDiv\" class=\"layui-form-item\">
<label class=\"layui-form-label\"><span class=\"star\">*</span>是否公开：</label>
<div class=\"layui-input-block\">
<input type=\"radio\" name=\"opened\" value=\"0\" title=\"是\">
<input type=\"radio\" name=\"opened\" value=\"1\" title=\"否\" checked=\"\">
</div>
</div>
</div>
<div class=\"layui-form-item clearfix\">
<div class=\"layui-input-block buttonWrap\">
<button class=\"layui-btn\" lay-submit lay-filter=\"*\"> 提 交
</button>
<button type=\"button\" lay-close class=\"layui-btn layui-btn-primary closeBtn\"> 关 闭 </button>
</div>
</div>
</form>
</div>
</div>
<script>
$(function () {
//原始监听事件开始
// $(\":radio[name=\'opened\']\").click(function () {
// console.log(\"1111111\");
// });
//原始监听事件结束
//现在监听事件开始 $(\"#openedDiv div i\").click(function () { var open_check_value = $(\"input[name=\'opened\']:checked\").val() console.log(open_check_value); }); //现在监听事件结束
//验证是否会影响form表单的正常提交
layui.use(\'form\', function () {
var form = layui.form;
form.on(\'submit(*)\', function (data) {
console.log(\"submit\");
return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
});
});
});
</script>
</body>
</html>
以上这篇浅谈layui 表单元素的选中问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
© 版权声明
THE END
暂无评论内容