1

次のようなテーブルにラジオボタンのグループを1つ作成しました

    <table cellpadding="0" cellspacing="0" border="0">
    <tbody>
        <tr>
            <td>
                <input type="radio" name="radios" id="8-9" />
                <label for="8-9">08-09 am</label>
            </td>
        </tr>
        <tr>
            <td>
                <input type="radio" name="radios" id="9-10" />
                <label for="9-10">09-10 am</label>
            </td>
        </tr>
    </tbody>
</table>

そして、ラジオボタンのいずれかがクリックされたとき、親の背景を変更する必要があり、そのためのJQueryは次のようになります-

$(document).on('click', '#8-9', function (event) {
    $checked = $("#8-9").is(':checked');
    if ($checked) {
        $(this).parent().css("background-color", "#000");
        $(this).parent().css("color", "#fff");
    } else {
        $(this).parent().css("background-color", "#ff0000");
        $(this).parent().css("color", "#fff");
    }
});

$(document).on('click', '#9-10', function (event) {
    $checked = $("#9-10").is(':checked');
    if ($checked) {
        $(this).parent().css("background-color", "#000");
        $(this).parent().css("color", "#fff");
    } else {
        $(this).parent().css("background-color", "#252525");
        $(this).parent().css("color", "#fff");
    }
});

このコードは機能しています。ラジオをクリックすると親の背景が変更されますが、ラジオのチェックを外すと親の背景はデフォルトにリセットされません。私のスクリプトに間違いがありますか、それとも他の方法がありますか?

4

3 に答える 3

2

これをチェックしてください：http://jsfiddle.net/ChaitanyaMunipalle/R4htK/

まず、ラジオ ボタンの親の css をリセットしてから、チェックされているものを設定する必要があります。

$('input[name=radios]').on('change', function() {
    $('input[name=radios]').parent().css("background-color", "#ff0000");
    $('input[name=radios]').parent().css("color", "#fff");
    $(this).parent().css("background-color", "#000");
    $(this).parent().css("color", "#fff");
});
于 2013-09-25T09:59:25.457 に答える
1

以下のようにコードを最適化できます

$(document).on('change', '.radioBtn', function (event) {
    $('.radioBtn').parent().css("background-color", "#FFF").css("color", "#000");
    $(this).parent().css("background-color", "#000").css("color", "#fff");
});

HTMl を次のように変更します。

<table cellpadding="0" cellspacing="0" border="0">
    <tbody>
        <tr>
            <td>
                <input type="radio" name="radios" id="8-9" class="radioBtn" />
                <label for="8-9">08-09 am</label>
            </td>
        </tr>
        <tr>
            <td>
                <input type="radio" name="radios" id="9-10" class="radioBtn"/>
                <label for="9-10">09-10 am</label>
            </td>
        </tr>
    </tbody>
</table>

これをチェックしてくださいhttp://jsfiddle.net/8fWZG/1/

要件に従ってカラー コードを変更する必要があります。

于 2013-09-25T10:08:43.653 に答える
0

問題は、ラジオボタンに個別にバインドしているため、クリックが1回しか発生しないことです。これを試して

var selected = null;

$(document).on("click", "input[type='radio']", function(){
    if(selected != null){
        selected.parent().css({backgroundColor:"white", color:"black"});
    }

    $(this).parent().css({backgroundColor:"black", color:"white"});
    selected = $(this);
})

http://jsfiddle.net/ricobano/YBW9c/

于 2013-09-25T10:04:12.917 に答える