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

不過本文作出的動態設置選中狀態單選與多選的作法是一致的。

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

第一次嘗試：

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

發現在input包括中無法解析到if判斷語句；當然在普通情況下是可以的，中不過程序使用了layui，因為layui通過js識別所有表單元素，重新編譯了。所以在js的重新編譯中無法識別原本不屬于表無素材的標簽。

第二次嘗試：

<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>

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

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

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

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

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

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

當該方法用于返回屬性值時，則返回第一個匹配元素的值。

當該方法用于設置屬性值時，則為匹配元素集合設置一個或多個屬性/值對。

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

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

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

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

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

thistag="{$info.tag}";//讀后臺數據值var mytag=new Array("無","第一項","第二項","第三項","第四項","第五項")；//所有單選項目cntag="";for(j = 0,len=mytag.length; j < len; j++) { //遍歷數組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); //打印到網頁中顯示最終效果

優點：只讀一次后面數據；

簡化：就算單選項很多，只需寫在一個數組中即可。

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。