jQuery Checkbox选择和更改类 [英] jQuery Checkbox selection and change class
问题描述
我有这样的表格:
<form action='' onsubmit='void(0)' class="mainform">
<label class="form3"><input type="checkbox"> One a fancy cross-browser styled checkbox</label>
<label class="form3"><input type="checkbox"> two a fancy cross-browser styled checkbox</label>
<label class="form3"><input type="checkbox"> Three a fancy cross-browser styled checkbox</label>
<label class="form3"><input type="checkbox"> Four a fancy cross-browser styled checkbox</label>
<label class="form3"><input type="checkbox"> Five a fancy cross-browser styled checkbox</label>
<label class="form3"><input type="checkbox"> Six a fancy cross-browser styled checkbox</label>
<label class="form3"><input type="checkbox"> Seven a fancy cross-browser styled checkbox</label>
<label class="form3"><input type="checkbox"> eight a fancy cross-browser styled checkbox</label>
<label class="form3"><input type="checkbox"> 9 a fancy cross-browser styled checkbox</label>
<label class="form3"><input type="checkbox"> 10 a fancy cross-browser styled checkbox</label>
<label class="form3"><input type="checkbox"> 11 a fancy cross-browser styled checkbox</label>
<label class="form3"><input type="checkbox"> 12 a fancy cross-browser styled checkbox</label>
<label class="form3"><input type="checkbox"> 13 a fancy cross-browser styled checkbox</label>
<label class="form3"><input type="checkbox"> 14 a fancy cross-browser styled checkbox</label>
</form>
现在,我要这样做. 当用户选中或取消选中复选框时,我想在标签上添加/删除类,以便在选中和未选中复选框时可以显示不同颜色的文本.
Now, I want to do this. When the user checks or unchecks a checkbox, I want to add/remove class to the label so that I can show different coloured text when teh checkbox is selected and when it is not.
我正在尝试这样做:
$(document).ready(function(){
$('.form3').each(function(i,e) {
if(checklist[i] == "")
{
$(this).find('input[type=checkbox]').attr('checked', false);
$(this).appendTo($('form'));
$(this).find('input[type=checkbox]').change(function() {
$(this).closest('label').addClass("checkselected");
});
$(this).closest('label').removeClass("checkselected");
}
else
{
$(this).find('input[type=checkbox]').attr('checked', true);
$(this).find('input[type=checkbox]').change(function() {
$(this).closest('label').removeClass("checkselected");
});
$(this).closest('label').addClass("checkselected");
}
});
});
现在我知道这可能不是正确的方法,因为我是在"$('.form3').each(function(i,e)")内部完成的
Now I know that this maynot be the right way to do it because I am doing this inside the "$('.form3').each(function(i,e)"
这使它可以运行,但只能运行一次. 即使多次单击同一复选框,如何使它正常工作.
This makes it work but only once. How can I make it work even with mulltiple clicks to the same checkbox.
推荐答案
如果我正确理解了您的问题,那么您想要做的就是将click事件处理程序绑定到所有复选框,然后添加/删除一个类被单击的父级label
的类.如果正确,那么您可以这样做:
If I've understood your question correctly, then what you're trying to do is bind a click event handler to all the checkboxes, and add/remove a class to parent label
of the one that's been clicked. If that's correct, then you can do this:
$("input[type='checkbox']").change(function() {
$(this).closest("label").toggleClass("someClass");
});
toggleClass
方法无需检查复选框是否已选中.您可以传入第二个参数来显示是否应该添加或删除该类,因此,如果某些复选框开始时已经被选中,则可能要使用该参数:
The toggleClass
method removes the need to check whether or not the checkbox is checked. You can pass in a second argument to show whether or not the class should be added or removed, so if some of your checkboxes start off already checked, you may want to use that:
$("input[type='checkbox']").change(function() {
$(this).closest("label").toggleClass("someClass", this.checked);
});
这是上述代码的工作示例.
这篇关于jQuery Checkbox选择和更改类的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!