[前端] click点击切换本身的class

本文主要是介绍[前端] click点击切换本身的class，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

html布局：

 

<form action="{:U('index')}" method="post"><label class="mask-checkbox"><input type="checkbox"/>男</label>
</form>

 

 

 

css样式：

 

<style>.mask-checkbox {display: inline-block;padding-left: 20px;background: url(__PUBLIC__/image/bg-checkbox.png) no-repeat left center;}.mask-checkbox.on {background: url(__PUBLIC__/image/bg-checkbox-checked.png) no-repeat left center;}.mask-checkbox  input {display: none;}
</style>

 

 

 

方法一（js）：

 

var eLabel = document.querySelector('label');
var bFlag = true;
eLabel.onclick = function() {if(bFlag) {this.classList.add('on');bFlag = false;return false;} else {this.classList.remove('on');bFlag = true;return false;}
};

 

 

 

方法二（jquery）：

 

$('.mask-checkbox').click(function() {if($(this).hasClass('on')) {$(this).removeClass('on');return false;} else {$(this).addClass('on');return false;}
});

主要是return false; 阻止继续执行。

欢迎关注技术开发分享录：http://fenxianglu.cn/

 

这篇关于[前端] click点击切换本身的class的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---