-1

私はこれの多くの例を見つけましたが、1 つのナゲットで私がやろうとしていることを正確に示しているものはありません。チェックボックスまたはラジオが「チェック」されているかどうかに応じて、チェックボックスまたはラジオのラベルを変更する必要があります (派手な入力の場合、ラベルは入力を囲む必要があります)。これらの入力の一部は、フォームに到着したときにチェックされるため、チェックされている場合は到着時にクラスを表示する必要があります。

チェックボックスは現在機能していますが、ラジオボタンを壊さずにミックスに追加するにはどうすればよいですか? 助けてくれてありがとう！

ここに私の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/

4

2 に答える 2

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();
});​

フィドル

于 2012-08-04T20:50:10.013 に答える
0

無線入力をeach()ループに追加し、toggleLabelClass()関数にいくつかの変更を加える必要があります。これはあなたが必要とするものですか: http://jsfiddle.net/zjc9e/

ミックスを壊さないとはどういう意味かわかりません。変更したくないコードの部分はありますか?

于 2012-08-04T20:41:46.867 に答える