現(xiàn)象

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

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

問題解決的思路

因為是用js控制的，所以沒有綁定鼠標的點擊事件。我們通過對比以下兩種動作的class變化：
1.手動鼠標勾選checkbox
2.js控制checkbox被勾選上
得出對比差，可以看下圖：

image.png

我手動勾選時，input的checkbox，會追加屬性checked=”checked“，同時它的父節(jié)點div，也會追加一個名為“checked”的class。

image.png

當我手動取消勾選時，就會刪除這個class。

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

解決方案

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

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

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