Javascript 复选框div双重标签?
我不知道为什么当点击复选框时,它会将相关的标签文本加倍。有人能帮我吗Javascript 复选框div双重标签?,javascript,jquery,checkbox,Javascript,Jquery,Checkbox,我不知道为什么当点击复选框时,它会将相关的标签文本加倍。有人能帮我吗 // add multiple select / deselect functionality $("#selectall").click(function () { $('.child').attr('checked', this.checked); $('.ck,.chkbox,.checkAll ,input:
// add multiple select / deselect functionality
$("#selectall").click(function () {
$('.child').attr('checked', this.checked);
$('.ck,.chkbox,.checkAll ,input:radio').DcustomInput();
});
jQuery.fn.DcustomInput = function(){
$(this).each(function(i){
if($(this).is('[type=checkbox],[type=radio]')){
var input = $(this);
var id=input.attr('id');
// get the associated label using the input's id
var forlabel = $('label[for='+input.attr('id')+']');
var chklabel = forlabel.text();
forlabel.hide();
var label = $("<label for='"+id+"' class='checker'>"+chklabel+"</label>");
//get type, for classname suffix
var inputType = (input.is('[type=checkbox]')) ? 'checkbox' : 'radio';
// alert(label);
// wrap the input + label in a div
$('<div class="custom-'+ inputType +'"></div>').insertBefore(input).append(input, label);
// find all inputs in this set using the shared name attribute
if(input.is(':disabled')){
if(inputType == 'checkbox' && input.is(':checked')){
label.addClass(' checkedDisabled ');
} else{
label.addClass(' disabled ');
}
}
// necessary for browsers that don't support the :hover pseudo class on labels
label.hover(
function(){
if(!input.is(':disabled') ){
$(this).addClass('hover');
}
if(inputType == 'checkbox' && input.is(':checked') && !input.is(':disabled')){
$(this).addClass('checkedHover');
}
},
function(){ $(this).removeClass('hover checkedHover focus'); }
);
//bind custom event, trigger it, bind click,focus,blur events
input.bind('updateState', function(){
if (input.is(':checked') && !input.is(':disabled')) {
if (input.is(':radio')) {
var allInputs = $('input[name='+input.attr('name')+']');
allInputs.each(function(){
$('label[for='+$(this).attr('id')+']').removeClass('checked');
});
};
label.addClass('checked ');
}
else { label.removeClass('checked checkedHover checkedFocus '); }
})
.trigger('updateState')
.click(function(){
$(this).trigger('updateState');
})
.focus(function(){
label.addClass('focus');
if(inputType == 'checkbox' && input.is(':checked')){
$(this).addClass('checkedFocus');
}
})
.blur(function(){ label.removeClass('focus checkedFocus'); });
}
});
};
</script>
//添加多个选择/取消选择功能
$(“#选择全部”)。单击(函数(){
$('.child').attr('checked',this.checked);
$('.ck、.chkbox、.checkAll,输入:radio').DcustomInput();
});
jQuery.fn.DcustomInput=函数(){
$(此).each(函数(i){
if($(this).is('[type=checkbox],[type=radio]')){
var输入=$(此);
var id=input.attr('id');
//使用输入的id获取关联的标签
var-forlabel=$('label[for='+input.attr('id')+']');
var chklabel=forlabel.text();
forlabel.hide();
变量标签=$(“”+chklabel+“”);
//获取类名称后缀的类型
var inputType=(input.is('[type=checkbox]')?'checkbox':'radio';
//警报(标签);
//将输入+标签包装在一个div中
$(“”).insertBefore(输入).append(输入,标签);
//使用“共享名称”属性查找此集合中的所有输入
if(input.is(':disabled')){
如果(inputType='checkbox'&&input.is(':checked')){
label.addClass('checkedDisabled');
}否则{
label.addClass('disabled');
}
}
//对于不支持标签上的:hover伪类的浏览器是必需的
标签悬停(
函数(){
如果(!input.is(':disabled')){
$(this.addClass('hover');
}
如果(inputType='checkbox'&&input.is(':checked')&&&input.is(':disabled')){
$(this.addClass('checkedHover');
}
},
函数(){$(this).removeClass('hover checkedHover focus');}
);
//绑定自定义事件、触发它、绑定单击、聚焦、模糊事件
bind('updateState',function(){
if(input.is(':checked')&&!input.is(':disabled')){
if(input.is(':radio'){
var allInputs=$('input[name='+input.attr('name')+']);
allInputs.each(函数(){
$('label[for='+$(this.attr('id')+']')).removeClass('checked');
});
};
label.addClass('checked');
}
else{label.removeClass('checked checked hover checked focus');}
})
.trigger('updateState'))
。单击(函数(){
$(this.trigger('updateState');
})
.focus(函数(){
label.addClass('focus');
如果(inputType='checkbox'&&input.is(':checked')){
$(this.addClass('checkedFocus');
}
})
.blur(函数(){label.removeClass('focus checkedFocus');});
}
});
};
我不太清楚DcustomInput的功能,但我可以猜到,$('.ck、.chkbox、.checkAll,input:radio').DcustomInput()代码>需要放在document ready上,而不是click handler上。好的,我找到了解决方案,只需注释这两行:
forlabel.hide();
$('<div class="custom-'+ inputType +'"></div>').insertBefore(input).append(input, label);
forlabel.hide();
$(“”).insertBefore(输入).append(输入,标签);
这样就不会隐藏旧标签,我们也不会试图复制输入和旧标签 你能添加HTML来配合它吗?你能指出一段代码中标签可能被修改的地方吗?我有一个名为“selectall”的复选框来检查“child”类的所有其他复选框。但是我的模板附带了一个额外的jquery,如是。customInput()已放入文档准备就绪。我尝试复制到DcustomInput()来修改它,这样它就不会使label@silentbang对不起,我不明白你的意思。您是否已经将我在文档上注释的代码放置就绪并从click handler中删除了它?