前幾天接觸一個(gè)二次開發(fā)，后臺(tái)UI用的是layui框架，程序原來的TAG標(biāo)簽設(shè)置中自由輸入的，想修改為單選。這樣子的功能用于，一個(gè)產(chǎn)品屬于兩種分類的作法。第一種就是系統(tǒng)自帶的產(chǎn)品分類，第二種使用標(biāo)簽來實(shí)現(xiàn)。然爾一個(gè)產(chǎn)品并不需要同時(shí)屬于兩個(gè)以上的標(biāo)簽，所以二次開發(fā)修改為單選radio,而不是多選checkbox。

不過本文作出的動(dòng)態(tài)設(shè)置選中狀態(tài)單選與多選的作法是一致的。

在前端模板文件中，普通用到的是使用<if condition=””></if>來作判斷。但是奇怪的就是layui并不能識別。

第一次嘗試：

<input class='layui-input' type='radio' name='tag' title='正常' value='正常' <if condition="">checked</if>>

發(fā)現(xiàn)在input包括中無法解析到if判斷語句；當(dāng)然在普通情況下是可以的，中不過程序使用了layui，因?yàn)閘ayui通過js識別所有表單元素，重新編譯了。所以在js的重新編譯中無法識別原本不屬于表無素材的標(biāo)簽。

第二次嘗試：

<if condition=""><input class='layui-input' type='radio' name='tag' title='正常' value='正常' checked><else/><input class='layui-input' type='radio' name='tag' title='正常' value='正常'></if>

以上代碼確定可以選中狀態(tài)，但隨之又有其它問題隨之而來，選中的與未選中的兩個(gè)均會(huì)顯示出來，為什么呢?

原因還是在于layui遍歷form里的表單元素，并不會(huì)因if語句的存在而作出最終結(jié)果。而是識別到有兩個(gè)input。

第三次嘗試，不用radio，不就是單選嗎?下拉單項(xiàng)也是可以的，使用<select>又測試了一番。同樣會(huì)出現(xiàn)以上兩個(gè)問題。

無辦法下只能求助于神奇的百度給出了這樣的結(jié)果；

$("input[name=tag][value=正常]").prop("checked","true");form.render();

prop() 方法設(shè)置或返回被選元素的屬性和值。

當(dāng)該方法用于返回屬性值時(shí)，則返回第一個(gè)匹配元素的值。

當(dāng)該方法用于設(shè)置屬性值時(shí)，則為匹配元素集合設(shè)置一個(gè)或多個(gè)屬性/值對。

render()就是重新渲染對象；

看到這里很多朋友以為問題已經(jīng)得到解決了，其實(shí)問題才剛剛開始。不是提示form對象找不到，就是提示form中找不到render()方法。為什么呢，整套程序不是doem，它還整合了很多其它的框架和插件，調(diào)作起來并不像官方給出的這么直接。

form.render();$form.render();form().render();.layui.form().render();……

通通試了一篇，還是不行，這東西就有這么折騰。累了中途休息一下。

一覺睡醒，闊然開朗。先來看看完成后的代碼。

thistag="{$info.tag}";//讀后臺(tái)數(shù)據(jù)值var mytag=new Array("無","第一項(xiàng)","第二項(xiàng)","第三項(xiàng)","第四項(xiàng)","第五項(xiàng)")；//所有單選項(xiàng)目cntag="";for(j = 0,len=mytag.length; j < len; j++) { //遍歷數(shù)組if(thistag==mytag[j]){ //判斷是否選中cntag+="<input class=\'layui-input\' type=\'radio\' name=\'tag\' id=\'tag\' title=\'"+newtit+"\' value=\'"+mytag[j]+"\' checked>";}else{cntag+="<input class=\'layui-input\' type=\'radio\' name=\'tag\' id=\'tag\' title=\'"+newtit+"\' value=\'"+mytag[j]+"\' >";}}$("#cntag").html(cntag); //打印到網(wǎng)頁中顯示最終效果

優(yōu)點(diǎn)：只讀一次后面數(shù)據(jù)；

簡化：就算單選項(xiàng)很多，只需寫在一個(gè)數(shù)組中即可。

簡單：只需寫一次判斷語句；

原理既然是前端使用，多用js,少用<if><php>這些php后端定義的標(biāo)簽。

總結(jié)

以上是生活随笔為你收集整理的解决layui前端动态设置radio、checkbox默认选项的解决方案的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。