js怎么实现点击切换checkbox背景图片-创新互联

 记住密码
 

其中checkbox 默认为勾选状态。

设置样式，CSS代码如下：

.check{
  text-align: right;
  font-size:24px;
  height: 50px; 
  width: 150px;
  background: url(img/btn_1.png) left center no-repeat;
  }
.checkbox{
  width:50px;
  height: 50px;
  vertical-align: middle;
  filter:alpha(opacity=0); 
  -moz-opacity:0; 
  -khtml-opacity: 0; 
  opacity: 0; 
  }
label {
  vertical-align: middle;
  }

将checkbox透明度设为0，再以背景图片来代替复选框就能得到带有勾选图片的效果。默认为记住密码的勾选状态，btn_1.png 即为背景为蓝色的勾选图片。值得注意的是，将 input 标签与 label 标签同时加上 vertical-align: middle; 属性才能实现文字与复选框垂直居中对齐。

接下来实现单击切换checkbox背景图片的效果，1.9版本以下的 jQuery 里的 toggle() 方法可以直接实现切换：

toggle(objs) {
  $(objs).each(function(){
   if ($(this).is(':hidden')) $(this).show(); else $(this).hide();
  });
 }

然而 jQuery 1.9及以上版本已经删除了该方法，因此可以用原生 javascript 来实现，具体代码如下：

$(document).ready(function(){
 var flag = 1;
 $(".check").click(function(){
  if(flag == 1){
   $(".check").css("background","url(img/btn_1.png) left center no-repeat");
   flag = 0;
  } else{
   $(".check").css("background","url(img/btn_2.png) left center no-repeat");
   flag = 1;
  }
 })
});

看完了这篇文章，相信你对“js怎么实现点击切换checkbox背景图片”有了一定的了解，如果想了解更多相关知识，欢迎关注创新互联网站建设公司行业资讯频道，感谢各位的阅读！

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。