现象
开发后台管理系统时遇到一个问题,后台管理系统是使用Hui+laravel+mysql实现的,很多表单等样式,都是用的Hui的自带样式。在用js代码控制checkbox勾选时,会勾选不上,通过浏览器开发工具查看样式,其实是已经加上去的,这是为什么呢?
Hui是一套轻量级web前端框架,官网地址是:http://www.h-ui.net/
问题解决的思路
因为是用js控制的,所以没有绑定鼠标的点击事件。我们通过对比以下两种动作的class变化:
1.手动鼠标勾选checkbox
2.js控制checkbox被勾选上
得出对比差,可以看下图:
我手动勾选时,input的checkbox,会追加属性checked=”checked“,同时它的父节点div,也会追加一个名为“checked”的class。
当我手动取消勾选时,就会删除这个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,就可以展示勾选了。