前端html引入的js文件无效,引入前端框架，原生js失效问题

现象

开发后台管理系统时遇到一个问题，后台管理系统是使用Hui+laravel+mysql实现的，很多表单等样式，都是用的Hui的自带样式。在用js代码控制checkbox勾选时，会勾选不上，通过浏览器开发工具查看样式，其实是已经加上去的，这是为什么呢？

Hui是一套轻量级web前端框架，官网地址是：http://www.h-ui.net/

问题解决的思路

因为是用js控制的，所以没有绑定鼠标的点击事件。我们通过对比以下两种动作的class变化：

1.手动鼠标勾选checkbox

2.js控制checkbox被勾选上

得出对比差，可以看下图：

image.png

我手动勾选时，input的checkbox，会追加属性checked=”checked“，同时它的父节点div，也会追加一个名为“checked”的class。

image.png

当我手动取消勾选时，就会删除这个class。

而js控制checkbox勾选时，父节点的div是不会追加这个“checked”class的。

事实上，它是已经被勾选上了，只是Hui的样式把原生html的input样式给覆盖，Hui在原生上包裹了一层样式，要控制这层样式。

解决方案

var checkBox = parent.document.getElementById("cartype_id_"+x);

//这样处理可以使用jquery的方法，控制勾选

$(checkBox).attr('checked',true);

//追加父节点的class

$(checkBox).parent().addClass("checked");

主要我的需求是个弹框，是需要获取弹框父节点的id，所以用parent.document，如果是在本节点，可以直接用jquery的方法。

我用原生js获取所需要更改的节点后，用$()可以强行调用jquery的方法，很方便。在此，我们追加父节点的class，就可以展示勾选了。