`

bootstrap-switch使用

阅读更多
	<div class="form-body">
							<div class="form-group">
								<label class="control-label col-md-3">四方业务是否开放</label>
								<div class="col-md-9" id="editDivForFourStatus">
									<input type="checkbox" id="fourStatus" name="fourStatus" class="make-switch" data-on-color="success" data-off-color="default" data-on-text="开放中" data-off-text="关闭中" />
								</div>
							</div>
							
							<div class="form-group">
								<label class="control-label col-md-3">三方业务是否开放</label>
								<div class="col-md-9" id="editDivForThreeStatus">
									<input type="checkbox" id="threeStatus" name="threeStatus" class="make-switch" data-on-color="success" data-off-color="default" data-on-text="开放中" data-off-text="关闭中" />
								</div>
							</div>
						</div>

初始化选中
if(fourStatus=="1"){
		$('#fourStatus').bootstrapSwitch('toggleState');
        $('#fourStatus').bootstrapSwitch('state', true);
	}else{
		$('#fourStatus').bootstrapSwitch('toggleState');
        $('#fourStatus').bootstrapSwitch('state', false);
	}
分享到:
评论

相关推荐

    bootstrap-switch.css

    开关按钮样式文件bootstrap-switch.css 开关按钮样式文件bootstrap-switch.css 开关按钮样式文件bootstrap-switch.css 开关按钮样式文件bootstrap-switch.css 开关按钮样式文件bootstrap-switch.css 开关按钮样式...

    bootstrap-switch.min.js

    bootstrap-switch.min.js

    bootstrap-switch.min.css

    bootstrap-switch.min.css

    前端项目-angular-bootstrap-switch.zip

    这个项目的文件名"angular-bootstrap-switch-master"表明这是一个主分支的版本,可能包含了最新的特性、修复和改进。通常,"master"分支代表项目的主要开发线,是最稳定的版本。 在实际应用中,"angular-bootstrap-...

    bootstrap-switch-master

    $('#mySwitch').bootstrapSwitch(); }); ``` 这只是一个基本的用法示例,实际上Bootstrap Switch提供了许多可配置选项,如颜色、大小、是否允许三态等,以及事件处理,允许开发者根据需求进行深入定制。 总的来说...

    最新开关按钮 bootstrap-switch

    $("#mySwitch").on('switchChange.bootstrapSwitch', function(event, state) { console.log('Switch changed to:', state); // 在这里执行你的业务逻辑 }); ``` 6. **API 方法**:Bootstrap Switch 还提供了...

    bootstrap-switch开关控件

    $('#mySwitch').bootstrapSwitch('state', true, { color: 'success' }); ``` 4. **事件与方法** 开关控件还提供了丰富的事件和方法,用于监听用户操作或动态改变开关状态。例如,我们可以监听"switch-change...

    bootstrap-switch bootstrap 开关

    - **更新状态**:使用 `bootstrapSwitch('setState', true|false)` 来改变开关的状态。 在压缩包文件 `bootstrap-switch-master` 中,可能包含了源码文件、示例、文档和其他资源。通常,你可以通过查看源码和示例来...

    bootstrap-table bootstrap-switch开关按钮(js和css)插件

    在使用时,你需要先在HTML中添加`&lt;input type="checkbox" class="switch"&gt;`,然后通过JavaScript的`.bootstrapSwitch()`方法将其转化为开关样式,如`$('input[type="checkbox"]').bootstrapSwitch();`。同时,该插件...

    bootstrapSwitch.zip

    5. **API 方法**:Bootstrap Switch 还提供了 API 方法来控制开关状态,如 `bootstrapSwitch('state')` 获取状态,`bootstrapSwitch('toggleState')` 切换状态,`bootstrapSwitch('setState', bool)` 设置状态等。...

    bootstrap-switch

    bootstrap-switch开关控件,里面包含了bootstrap-switch的css和bootstrap-switch.js两个主要的文件,使用时只需要引入这两个文件,然后初始化$('[name="status"]').bootstrapSwitch({ size:"mini", onSwitchChange:...

    bootstrap的switch控件需要引入的js和css文件

    $('input[type=checkbox]').bootstrapSwitch(); ``` 还可以通过数据属性或 JavaScript API 来定制开关的行为,例如设置开关的状态、颜色、大小等。 在实际开发中,为了提高用户体验和页面性能,我们通常会采用延迟...

    bootstrap-switch资源文件,js和css

    $('input[type="checkbox"]').bootstrapSwitch({ state: true, // 默认状态,开或关 onColor: 'success', // 开启时的颜色 offColor: 'danger', // 关闭时的颜色 onText: '开启', // 开启的文字 offText: '关闭...

    jw-bootstrap-switch-ng2:Angular 2+的Bootstrap开关

    支持NPM版本角度的^ 2.0.0 角度6+ 1.0.10 角度5 1.0.0 角度2-4安装 npm install jw-bootstrap-switch-ng2 --save重大变化版本^ 2.0.0 现在,为了捕获开关更改时的事件,现在您需要使用事件changeState 将模块从...

    bootstrapSwitch

    3. **事件驱动**:BootstrapSwitch支持多种事件,如`switch-change`、`switch-toggle`等,这些事件允许开发者在用户操作开关时执行相应的回调函数,实现动态交互效果。 4. **可定制化**:该插件允许用户自定义开关...

Global site tag (gtag.js) - Google Analytics