layui 動(dòng)態(tài)設(shè)置checbox 選中狀態(tài)的例子

更新時(shí)間：2019年09月02日 14:44:38 作者：blowDestiny

今天小編就為大家分享一篇layui 動(dòng)態(tài)設(shè)置checbox 選中狀態(tài)的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

最近在使用layui前端框架，在使用單選按鈕、下拉菜單select、checkbox等控件的時(shí)候往往遇到一些初始化的東西。

有時(shí)候會(huì)發(fā)現(xiàn)，自己動(dòng)態(tài)append進(jìn)去的代碼要不就是沒有顯示，要不就是初始化默認(rèn)選中出問題。

以上這些情況進(jìn)行了測(cè)試：

第一種情況：動(dòng)態(tài)append()html代碼后沒有顯示空間的解決方案：

添加

layui.form.render();//重新渲染 可以解決多種沒有顯示的情況

第二種情況：動(dòng)態(tài)設(shè)置默認(rèn)選中狀態(tài)沒有效果解決方案：

細(xì)分為兩種情況：

（1）在html頁面代碼下(沒有在layer初始化框架中，即沒有在layui.use([], function(){ }) 中進(jìn)行初始化）

以初始化checkbox默認(rèn)選中為例：

$('.xxx').attr("checked", true); //注意這里使用的是attr()
layui.form.render(); //重新渲染顯示效果

（2）在layui.use(); 初始化中初始化一般這種情況會(huì)出現(xiàn)在調(diào)用api接口錯(cuò)誤之后使用不然checkbox改變狀態(tài)

layui.use(['form','layer'],function(){
 var form = layui.form
  layer = parent.layer === undefined ? layui.layer : top.layer,
  $ = layui.jquery;
 
if ($('.xxxx').attr("checked") === "checked") { //判斷是否選中
 
    $('.xxxx').prop("checked", true); //設(shè)置選中 注意這里使用的是prop(), 這里要是使用了attr()是無效的
   } else {
 
    $('.xxxx').prop("checked", false);
   }
 
   form.render(); //重新渲染
});

以上這篇layui 動(dòng)態(tài)設(shè)置checbox 選中狀態(tài)的例子就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JS使用遮罩實(shí)現(xiàn)點(diǎn)擊某區(qū)域以外時(shí)彈窗的彈出與關(guān)閉功能示例
這篇文章主要介紹了JS使用遮罩實(shí)現(xiàn)點(diǎn)擊某區(qū)域以外時(shí)彈窗的彈出與關(guān)閉功能,結(jié)合實(shí)例形式分析了javascript事件響應(yīng)及頁面元素屬性動(dòng)態(tài)操作彈出與關(guān)閉遮罩層相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2018-07-07
微信小程序開發(fā)實(shí)戰(zhàn)快速入門教程
這篇文章主要為大家介紹了開發(fā)一個(gè)微信小程序?qū)崙?zhàn)快速入門教程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-04-04
JavaScript取得鼠標(biāo)絕對(duì)位置程序代碼介紹
文章介紹了關(guān)于JavaScript在不同瀏覽器下取得鼠標(biāo)絕對(duì)位置相關(guān)函數(shù)用法及兼容性介紹，有需要的同學(xué)可參考一下
2012-09-09
深入分析javascript中console命令
console對(duì)象是JavaScript的原生對(duì)象，它有點(diǎn)像Unix系統(tǒng)的標(biāo)準(zhǔn)輸出stdout和標(biāo)準(zhǔn)錯(cuò)誤stderr，可以輸出各種信息用來調(diào)試程序，而且還提供了很多額外的方法，供開發(fā)者調(diào)用。它的常見用途有兩個(gè)。顯示網(wǎng)頁代碼運(yùn)行時(shí)的錯(cuò)誤信息。提供了一個(gè)命令行接口，用來與網(wǎng)頁代碼互動(dòng)。
2016-08-08
DeviceOne 讓你一見鐘情的App快速開發(fā)平臺(tái)
DeviceOne是一個(gè)非常先進(jìn)的App開發(fā)平臺(tái)，使用Javascript 構(gòu)建原生體驗(yàn)的移動(dòng)應(yīng)用程序，DeviceOne主要關(guān)注外觀和體驗(yàn)，以及和你的應(yīng)用程序的 UI 交互
2016-02-02
Bootstrap CSS布局之表格
這篇文章主要為大家詳細(xì)介紹了Bootstrap CSS布局之表格的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12
js調(diào)試系列源碼定位與調(diào)試[基礎(chǔ)篇]
如果看了1, 2兩篇，你對(duì)控制臺(tái)應(yīng)該有一個(gè)初步了解了，今天我們來個(gè)簡(jiǎn)單的調(diào)試。昨天留的三個(gè)課后練習(xí)，差不多就是今天要講的內(nèi)容
2014-06-06
微信小程序進(jìn)入廣告實(shí)現(xiàn)代碼實(shí)例
這篇文章主要介紹了微信小程序進(jìn)入廣告實(shí)現(xiàn)代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-09-09
JavaScript獲得頁面base標(biāo)簽中url的方法
這篇文章主要介紹了JavaScript獲得頁面base標(biāo)簽中url的方法,涉及javascript中元素的獲取及href屬性的使用技巧,需要的朋友可以參考下
2015-04-04
JS實(shí)現(xiàn)可視化文件上傳
這篇文章主要為大家詳細(xì) 介紹了JS實(shí)現(xiàn)可視化文件上傳，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-09-09