溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天就跟大家聊聊有關(guān)如何在LayUI中動態(tài)設置checkbox，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。
1.頁面引入layui.js和layui.css
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>手機銀行權(quán)限配置</title> <link type="text/css" rel="stylesheet" href="common/layui/css/layui.css" rel="external nofollow" /> <link type="text/css" rel="stylesheet" href="css/index.css" rel="external nofollow" /> <link rel="shortcut icon" href="images/favicon.ico" rel="external nofollow" /> </head> <body> <br> <h2 align="center">新版手機銀行權(quán)限動態(tài)配置</h2> <br> <div class="layui-form" > <div class="layui-form-item" > <label class="layui-form-label">交易類型</label> <div class="layui-input-block"> <select name="TransactionType" lay-search id="TransactionType"lay-filter="type"> <option value="InlineTransfer">行內(nèi)轉(zhuǎn)賬交易</option> <option value="InlineBookTransfer">行內(nèi)預約轉(zhuǎn)賬</option> <option value="SavToSavAuthPwd">行內(nèi)同名轉(zhuǎn)賬</option> <option value="IntercityTransfer">跨行轉(zhuǎn)賬交易</option> <option value="IntercityBookTransfer">跨行預約轉(zhuǎn)賬</option> <option value="WeiXinTransfer">微信轉(zhuǎn)賬交易</option> </select> </div> </div> <div class="layui-form-item" > <label class="layui-form-label">要配置的注冊類型</label> <div class="layui-input-block"> <select name="RegisterType" lay-search id="RegisterType" lay-filter="type"> <option value="T">T</option> <option value="S">S</option> <option value="R">R</option> </select> </div> </div> <button class="layui-btn" onclick="info()">開始配置</button> </div> <div > <form class="layui-form" action="update" id="updateForm" method="post"> <input type="hidden" name="TransactionType" id="TransactionType2"/> <input type="hidden" name="RegisterType" id="RegisterType2"/> <br> <h3>默認規(guī)則</h3> <hr> <div class="layui-form-item"> <label class="layui-form-label">支持的賬戶注冊類型</label> <div class="layui-input-block"> <input type="checkbox" name="RegisterFlag" title="T類" value="T" > <input type="checkbox" name="RegisterFlag" title="S類" value="S" > <input type="checkbox" name="RegisterFlag" title="R類" value="R" > </div> </div> <div class="layui-form-item"> <label class="layui-form-label">支持的最小版本號</label> <div class="layui-input-block"> <input type="text" name="MinVersion" required lay-verify="required" placeholder="請輸入支持的最小版本號" id="MinVersion" autocomplete="off" class="layui-input"> </div> </div> <br> <h3>靜態(tài)規(guī)則</h3> <hr> <div class="layui-form-item"> <label class="layui-form-label">人臉識別</label> <div class="layui-input-block"> <select name="NeedFaceCheck" lay-search id="NeedFaceCheck"> <option value="0">不需要</option> <option value="1">需要</option> </select> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">短信驗證碼</label> <div class="layui-input-block"> <select id="NeedOtpCheck" name="NeedOtpCheck" lay-search> <option value="0">不需要</option> <option value="1">需要</option> <option value="2">免短信</option> </select> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">交易密碼</label> <div class="layui-input-block"> <select name="NeedTrsPwdCheck" id="NeedTrsPwdCheck"lay-search> <option value="0">不需要</option> <option value="1">需要</option> <option value="2">免密</option> </select> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">支持的賬戶種類</label> <div class="layui-input-block"> <input type="checkbox" name="SupportAcClass" title="I類戶" value="01"> <input type="checkbox" name="SupportAcClass" title="II類戶" value="02"> <input type="checkbox" name="SupportAcClass" title="III類戶" value="03"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">II類戶配卡情況</label> <div class="layui-input-block"> <select name="SecondAcIssuedFlag" id="SecondAcIssuedFlag" lay-search> <option value="0">必須不配卡</option> <option value="1">必須配卡</option> <option value="2">配卡與否都允許</option> </select> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">人臉識別相似度</label> <div class="layui-input-block"> <input type="number" name="FaceSimilarity" required lay-verify="required" placeholder="請輸入人臉識別相似度" id="FaceSimilarity" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">指紋識別</label> <div class="layui-input-block"> <select name="NeedFingerprintCheck" id="NeedFingerprintCheck" lay-search> <option value="0">不需要</option> <option value="1">需要</option> </select> </div> </div> <br> <br> <h3>動態(tài)規(guī)則</h3> <hr> <div class="layui-form-item"> <label class="layui-form-label">超出日限額人臉識別</label> <div class="layui-input-block"> <select name="OverLimitNeedFaceCheck" id="OverLimitNeedFaceCheck" lay-search> <option value="0">不需要</option> <option value="1">需要</option> </select> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">超出日限額指紋識別</label> <div class="layui-input-block"> <select name="OverLimitNeedFingerprintCheck" id="OverLimitNeedFingerprintCheck" lay-search> <option value="0">不需要</option> <option value="1">需要</option> </select> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">啟用圖形驗證碼次數(shù)</label> <div class="layui-input-block"> <input type="number" name="NeedImageCheck" required lay-verify="required" placeholder="請輸入啟用圖形驗證碼的次數(shù)" id="NeedImageCheck" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">可替換方式</label> <div class="layui-input-block"> <select name="AllowSubstitution" lay-search lay-filter="sit" id="AllowSubstitution"> <option value="">請選擇替換方式</option> <option value="AB">人臉識別和短信驗證碼可替換</option> <option value="AC">人臉識別和交易密碼可替換</option> <option value="AD">人臉識別和指紋識別可替換</option> <option value="BC">短信驗證碼和交易密碼可替換</option> <option value="BD">短信驗證碼和指紋識別可替換</option> <option value="CD">交易密碼和指紋識別可替換</option> </select> </div> </div> <br> <hr> <br> </form> <div class="layui-form"> <div class="layui-form-item" > <div class="layui-input-block" > <button class="layui-btn" onclick="update()">立即提交</button> </div> </div> </div> <br><br> </div> <br> <br> <br> <br> <br> <script type="text/javascript" src="common/jquery/jquery.js"></script> <script type="text/javascript" src="common/layui/layui.js"></script> <script type="text/javascript" src="js/index.js"></script> </body> </html>
2.頁面js中要進行l(wèi)ayui模塊的初始化
/**
* layui的模塊初始化
*/
layui.use(['form', 'layer'], function () {
var form = layui.form;
form.on('select(type)', function (data) {
$("#TransactionType2").val($("#TransactionType").val());
$("#RegisterType2").val($("#RegisterType").val());
info();
})
form.render(); //渲染頁面
})
/**
* 頁面加載完成后執(zhí)行
*/
$(function () {
//初始化
$("#TransactionType2").val($("#TransactionType").val());
$("#RegisterType2").val($("#RegisterType").val());
//查詢
info();
})
//查詢
function info() {
var transactionType = $("#TransactionType").val();
var registerType = $("#RegisterType").val();
var data = {
TransactionType: transactionType,
RegisterType: registerType
};
/**
* 將所有的checkbox設置不選中
*/
$(":checkbox").prop("checked", false);
var index = layer.load(2);
$.ajax({
type: 'post',
url: 'info',
data: data,
success: function (res) {
layer.close(index);
if (res.code == 200) {
/**
* 最小版本號
*/
$("#MinVersion").val(res.MinVersion);
/**
*支持的賬戶類型
* @type {string}
*/
var registerFlag = res.RegisterFlag + "";
var registerFlags = registerFlag.split(",");
for (var i = 0; i < registerFlags.length; i++) {
//選中checkbox
$('[name="RegisterFlag"][value="' + registerFlags[i] + '"]').prop('checked', true);
}
/**
* 支持的賬戶種類
* @type {string}
*/
var supportAcClass = res.SupportAcClass + "";
var supportAcClasses = supportAcClass.split(",");
for (var i = 0; i < supportAcClasses.length; i++) {
//選中checkbox
$('[name="SupportAcClass"][value="' + supportAcClasses[i] + '"]').prop('checked', true);
}
// $("#NeedFaceCheck").find("option[value='"+res.NeedFaceCheck+"']").prop('selected',true);
$("#NeedOtpCheck").val(res.NeedOtpCheck);
$("#NeedFaceCheck").val(res.NeedFaceCheck);
$("#NeedTrsPwdCheck").val(res.NeedTrsPwdCheck);
$("#SecondAcIssuedFlag").val(res.SecondAcIssuedFlag);
$("#FaceSimilarity").val(res.FaceSimilarity);
$("#NeedFingerprintCheck").val(res.NeedFingerprintCheck);
$("#OverLimitNeedFaceCheck").val(res.OverLimitNeedFaceCheck);
$("#OverLimitNeedFingerprintCheck").val(res.OverLimitNeedFingerprintCheck);
$("#NeedImageCheck").val(res.NeedImageCheck);
$("#AllowSubstitution").val(res.AllowSubstitution);
layui.use('form', function () {
var form = layui.form;
form.render('checkbox');
form.render('select');
});
}
}
})
}
/**
* 更新
*/
function update() {
layer.confirm(" 您確定要提交嗎？", {icon: 3, title: '溫馨提示'}, function () {
var form = $("#updateForm");
var data = form.serialize();
var minVersion = $("#MinVersion").val();
var faceSimilarity = $("#FaceSimilarity").val();
var needImageCheck = $("#NeedImageCheck").val();
if (minVersion == '') {
layer.alert("請輸入支持的最低版本號");
return;
}
if (faceSimilarity == '') {
layer.alert("請輸入人臉識別相似度");
return;
}
if (needImageCheck == '') {
layer.alert("請輸入啟用圖形驗證碼的次數(shù)");
return;
}
var index = layer.load(2);
$.ajax({
type: 'post',
url: 'update',
data: data,
success: function (res) {
layer.close(index);
if (res.code == 200) {
layer.alert("操作成功");
} else {
layer.alert("操作失敗");
}
}
})
})
}注意：
for (var i = 0; i < registerFlags.length; i++) {
//選中checkbox
$('[name="RegisterFlag"][value="' + registerFlags[i] + '"]').prop('checked', true); 必須要用prop 不能用attr
}layui是一款采用自身模塊規(guī)范編寫的前端UI框架，它遵循原生HTML/CSS/JS的書寫與組織形式，門檻極低，適合新手，并且它還提供了豐富的內(nèi)置模塊，他們皆可通過模塊化的方式按需加載，從核心代碼到API的每一處細節(jié)都經(jīng)過精心雕琢，非常適合界面的快速開發(fā)，能夠作為PC網(wǎng)頁端后臺系統(tǒng)與前臺界面的速成開發(fā)方案。
看完上述內(nèi)容，你們對如何在LayUI中動態(tài)設置checkbox有進一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼