将类添加到默认选中复选框和单选框的标签中

Question

我已经找到了很多这样的例子，但没有一个是我想在一块金块中做的。我需要更改复选框或单选框的标签（对于我喜欢的输入，标签必须包裹在输入周围），这取决于复选框或复选框是否被"选中"。其中一些输入将在到达表单时被选中，因此如果选中，类需要在到达时显示。

它现在适用于复选框，但如何在不破坏它的情况下将单选按钮添加到组合中？感谢您的帮助！

这是我的HTML/CSS:

<style type="text/css">
.c_on {color: #F0F;}
.r_on {color: #0F0;}
</style>
<fieldset class="checkboxes">
    <label for="chk1"><input type="checkbox" id="chk1" />chk1</label><br />
    <label for="chk2"><input type="checkbox" id="chk2" checked="checked" />chk2</label>
</fieldset>
<fieldset class="radios">
    <label for="rdo1"><input type="radio" name="group1" id="rdo1" />rdo1</label><br />
    <label for="rdo2"><input type="radio" name="group1" id="rdo2" checked="checked" />rdo2</label>
</fieldset>

这是我的jQuery:

$(document).ready(function() {
    /* Turn checkbox class on */
    var checkOn = 'c_on'
    function toggleLabelClass(input){
        var $input = $(input);
        if ($input.is('[type="checkbox"]:checked')){
            $input.parent('label').addClass(checkOn);
        }else{
            $input.parent('label').removeClass(checkOn)
        }
    }
    $(function() {
        $('input[type="checkbox"]').each(function(){
            toggleLabelClass(this);
            $(this).click(function(evt){
                toggleLabelClass(evt.target);
            });
        });
    });
});

http://jsfiddle.net/P2n2V/

Answer 1

也许这样的东西会起作用：

$(function() {
    var inputOn = 'c_on',
        radioOn = 'r_on',
        elms=$('input[type="checkbox"], input[type="radio"]');
    function setLabelClass() {
        elms.each(function(i,e) {
            $(e).parent('label')[e.checked?'addClass':'removeClass']($(e).is(':radio')?radioOn:inputOn);
        });
    }
    elms.on('change', setLabelClass);
    setLabelClass();
});​

FIDDLE

Answer 2

您需要向each()循环添加无线电输入，并对toggleLabelClass()函数进行一些更改。这是你需要的吗：http://jsfiddle.net/zjc9e/

我不知道你所说的不打破这个组合是什么意思。代码中是否有您不想更改的部分？