如何对switchery.min.js美化的checkbox用动态控制开关

编程之家收集整理的这篇文章主要介绍了如何对switchery.min.js美化的checkbox用动态控制开关编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

《如何对switchery.min.js美化的checkBox用动态控制开关》要点:
本文介绍了如何对switchery.min.js美化的checkBox用动态控制开关,希望对您有用。如果有疑问,可以联系我们。

今天遇到一个需求:2个不相关的按钮选项,只能选择一个,

而这2个按钮是经过switchery.min.js美化的,简化的界面如下:

如何对switchery.min.js美化的checkbox用动态控制开关


这种问题只要找到插件回调函数即可, 但是在switchery.min.js官网上(http://abpetkov.github.io/switchery/)

好像并没有找到控制switchery开关的,

只有一个是disabled控制相近的,

 switchery.disable();

但是这个是让按钮失效(不可选状态,除非用脚本再还原可选状态),并不是我们要的开关,可以随时用鼠标切换。

另外有一个是用来判断按钮是否选中,可以使用:

 fromContent.checked


我们只能用.click()来模拟点击。问题可解决代码如下:



一、HTML部分:

<link rel="stylesheet" href="/public/ACE/assets/css/bootstrap.css" />
<script type="text/javascript" src="/public/js/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="/public/js/third-party/switchery/switchery.min.css" />
<script src="/public/js/third-party/switchery/switchery.min.js"></script>

<br clear="all"/><hr />
<form id="form1" name="form1" action="/t.PHP" method="post" />
<h2>以下2项只能选一项:</h2>
<div class="col-md-3">
       <label for="" class="col-md-6 control-label" style="padding-right: 0;padding-top: 0;">选项1</label>
       <div class="col-md-4" style="padding-top:  0;">
              <input  name="fromurl" id="fromurl" value="1" class="switch-fromurl col-md-2" type="checkBox">
       </div>
</div>
<div class="col-md-3">
       <label for="" class="col-md-6 control-label" style="padding-right: 0;padding-top: 0;">选项2</label>
       <div class="col-md-4" style="padding-top:  0;">
              <input  name="fromContent" id="fromContent" value="1" class="switch-fromContent col-md-2" type="checkBox">
       </div>
</div>
<br clear="all"/><hr />
<div class="col-md-3">
       <button type="submit" class="btn btn-primary btn-lg btn-block" id="subset"><i class="fa fa-envelope"></i> 提交设置</button>
</div>
</form>


二、JS部分:

<script type="text/javascript">
$(function(){
       if($('.switch-fromurl').length>0){
              var fromurl = document.querySelector('.switch-fromurl');
              var swfromurl = new Switchery(fromurl,{ size: 'small' , color: '#5555ff', jackColor: '#ceceff', secondaryColor: '#ccc'});

              //if($('.switch-fromContent').length>0){
              var fromContent = document.querySelector('.switch-fromContent');
              var swfromContent = new Switchery(fromContent, secondaryColor: '#ccc'});

              fromurl.onchange = function() {
                     if( fromurl.checked && fromContent.checked ) $(fromContent).click();
              };
              fromContent.onchange = function() {
                     if( fromContent.checked && fromurl.checked ) $(fromurl).click();
              };
       }
});
</script>

总结

以上是编程之家为你收集整理的如何对switchery.min.js美化的checkbox用动态控制开关全部内容,希望文章能够帮你解决如何对switchery.min.js美化的checkbox用动态控制开关所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入编程之家官方QQ群:1065694478

猜你在找的jQuery相关文章

jQuery插件的种类 1、封装对象方法 这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进行操作,是最常见的一种插件。此类插件可以发挥出jQuery选择器的强大优势,有相当一部分
扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间。 入门 编写一个jQuery插件开始于给jQuery.fn加入​​新的功能属性,此处添加的对象属性的名称就是你插件的名称: 为了避
最近项目中需要实现3D图片层叠旋转木马切换的效果,于是用到了jquery.roundabout.js。 兼容性如图: html结构代码: css样式: 引入的js 调用的一般形式: 实现的效果如图:
一、什么是deferred对象? 开发网站的过程中,我们经常遇到某些耗时很长的javascript操作。其中,既有异步的操作(比如ajax读取服务器数据),也有同步的操作(比如遍历一个大型数组),它们
AMD 模块 AMD(异步模块定义,Asynchronous Module Definition)格式总体的目标是为现在的开发者提供一个可用的模块化 JavaScript 的解决方案。 AMD 模块格
jQuery插件开发模式 软件开发过程中是需要一定的设计模式来指导开发的,有了模式,我们就能更好地组织我们的代码,并且从这些前人总结出来的模式中学到很多好的实践。 根据《jQuery高级编程》的描述,
记得去年做某个项目的时候,用到了邮箱输入自动提示功能,于是网上搜了一下,发现了这个写得不错,现在回想起来,转载一下,方便查阅。 邮箱的广泛使用得益于它的免费,因此很多网站在注册的时候都会直接使用邮箱作
在网页应用中,一般会用到上传文件或者图片什么的到服务器,那么可以用ajaxfileupload.js,但是在使用ajaxfileupload.js时候,当服务器返回的json带有&amp;符号的时候,
首先先搭写一个基本的格式: 然后用自调用匿名函数包裹你的代码,将系统变量以变量形式传递到插件内部,如下: 那么接下来我们就在里面实现点击文章图片弹出该图片并放大的效果。 整体代码如下: 参考地址:ht
元素属性和Dom属性简介 对于下面这样一个标签元素: 我们通常将id,src,alt,class称为属性,也即元素属性.但是,当浏览器对标签元素进行解析时,会将元素解析为Dom对象,相应的,元素属性也
实现思路 1.在一定的频率下在页面中生成一定数目的雪花从上往下飘落; 2.在指定的时间内飘落后移除页面; 3.可设置雪花的大小,在一定范围内随机雪花大小; 4.什么时间后清除生成雪花,停止函数。 js