Jquery easyui switchbutton简单使用

最新推荐文章于 2025-05-06 07:32:08 发布

阿小狸

最新推荐文章于 2025-05-06 07:32:08 发布

阅读量3.5w

点赞数 7

文章标签： switchbutton easyui

本文链接：https://blog.youkuaiyun.com/cr4blm123/article/details/49998563

版权

本文详细介绍了如何使用HTML和CSS实现一个简单的switchbutton功能，并提供了JavaScript代码用于控制开关状态。通过设置类样式和引用顺序，确保了自定义样式能够覆盖框架样式。此外，还演示了如何获取按钮的当前状态并进行相应的操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

刚刚做完switchbutton这个的简单的功能，下面说说最使用的几点。

html

<div class="state"><input class="easyui-switchbutton" onText="开" offText="关" name="unitState"></div>

onText=“”和offText=“”就是设置里面的文字，为了下面js使用，起个name

.switchbutton-on { background: #EAF2FF; color: #000000; }  /*开时的样式*/

.switchbutton-off { background: #E1E1E1; color: #000000; } /*关时的样式*/

这个class类设置开关样式。

注意引用css顺序，无论什么框架，先引用框架的css和js，再引用自己的css和js。

这样自定义的css和js就能覆盖框架的，各位看官切记！

说道这，有些框架的样式改不掉，js都不能覆盖，尝试在css样式后面添加!important试试。

.clear { clear: both !important; }

像这样，只要我们的css在框架的css之后被加载，一般都会覆盖框架的css。

var thisSwitchbuttonObj = $(".state").find("[switchbuttonName='unitState']");//获取switchbutton对象
var unitState = true;//是否选中的值

if(unitState){
	thisSwitchbuttonObj.switchbutton("check");
}
if(!unitState){
	thisSwitchbuttonObj.switchbutton("uncheck");	
}

初始化按钮。

var thisValue = thisSwitchbuttonObj.switchbutton("options").checked;

获取按钮的返回值，返回值类型：true或者false。

简单的案例