layui 表單元素的選中問題
阿新 • • 發佈：2019-02-09
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="*"> 提 交 </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>