layui 表单元素的选中问题

来源：互联网发布：mac上ps破解文件编辑：程序博客网时间：2024/05/16 01:37

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">
    <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="*">&nbsp;&nbsp;提&nbsp;&nbsp;&nbsp;交&nbsp;&nbsp;                    </button>                    <button type="button" lay-close class="layui-btn layui-btn-primary closeBtn">&nbsp;&nbsp;关&nbsp;&nbsp;&nbsp;闭&nbsp;&nbsp;</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>

阅读全文

0 0