現(xiàn)象

開發(fā)后臺(tái)管理系統(tǒng)時(shí)遇到一個(gè)問題，后臺(tái)管理系統(tǒng)是使用Hui+laravel+mysql實(shí)現(xiàn)的，很多表單等樣式，都是用的Hui的自帶樣式。在用js代碼控制checkbox勾選時(shí)，會(huì)勾選不上，通過瀏覽器開發(fā)工具查看樣式，其實(shí)是已經(jīng)加上去的，這是為什么呢？

Hui是一套輕量級web前端框架，官網(wǎng)地址是：http://www.h-ui.net/

問題解決的思路

因?yàn)槭怯胘s控制的，所以沒有綁定鼠標(biāo)的點(diǎn)擊事件。我們通過對比以下兩種動(dòng)作的class變化：
1.手動(dòng)鼠標(biāo)勾選checkbox
2.js控制checkbox被勾選上
得出對比差，可以看下圖：

image.png

我手動(dòng)勾選時(shí)，input的checkbox，會(huì)追加屬性checked=”checked“，同時(shí)它的父節(jié)點(diǎn)div，也會(huì)追加一個(gè)名為“checked”的class。

image.png

當(dāng)我手動(dòng)取消勾選時(shí)，就會(huì)刪除這個(gè)class。

而js控制checkbox勾選時(shí)，父節(jié)點(diǎn)的div是不會(huì)追加這個(gè)“checked”class的。
事實(shí)上，它是已經(jīng)被勾選上了，只是Hui的樣式把原生html的input樣式給覆蓋，Hui在原生上包裹了一層樣式，要控制這層樣式。

解決方案

var checkBox = parent.document.getElementById("cartype_id_"+x);
//這樣處理可以使用jquery的方法，控制勾選
$(checkBox).attr('checked',true);
//追加父節(jié)點(diǎn)的class
$(checkBox).parent().addClass("checked");

主要我的需求是個(gè)彈框，是需要獲取彈框父節(jié)點(diǎn)的id，所以用parent.document，如果是在本節(jié)點(diǎn)，可以直接用jquery的方法。

我用原生js獲取所需要更改的節(jié)點(diǎn)后，用$()可以強(qiáng)行調(diào)用jquery的方法，很方便。在此，我們追加父節(jié)點(diǎn)的class，就可以展示勾選了。