checkbox点击事件修改样式点击事件修改样式
由于需要个性化checkbox的点击事件，不得以研究了一下点击事件。奈何这个项目组居然没有checkbox的样式，看着这原生
的样式丑到爆，不得以研究了一下checkbox。（radio也是同理，区别是最好通过条件控制只能单选。）
这里先附上样式灵感来源地址
如果有需要变更图标的，可以在上述地址选取。
效果图：效果图：
tip:
需要用到
jquery,
注意导入。
checkbox.js
$(function() {
//activeCheckBox();
activeCheckBoxBySelector("", addSpan);
});
/* 激活所有的的checkboxdiv*/
function activeCheckBox() {
//初始化选中状态
$(".checkboxdiv").each(function() {
var checked = $(this).find("input").prop("checked");
if (checked) {
$(this).find(".checkboxstatus").addClass("checked");
} else {
$(this).find(".checkboxstatus").removeClass("checked");
}
})
//初始化按钮事件
$(".checkboxdiv").on("click", function() {
var checked = $(this).find("input").prop("checked");
if (checked) {
$(this).find("input").prop("checked", false)
$(this).find(".checkboxstatus").removeClass("checked");
} else {
$(this).find("input").prop("checked", true)
$(this).find(".checkboxstatus").addClass("checked");
}
})
}
/* 只激活某块地区的checkbox,个性化方法,避免影响其他.*/
function activeCheckBoxBySelector(selector, callback) {
var selector = selector + ' .checkboxdiv';
//初始化选中状态
$(selector).each(function() {
var checked = $(this).find("input").prop("checked");
if (checked) {
$(this).find(".checkboxstatus").addClass("checked");
} else {
$(this).find(".checkboxstatus").removeClass("checked");
}
})
//初始化按钮事件
$(selector).on("click", function() {
var checked = $(this).find("input").prop("checked");
评论0