0

私がやろうとしているのは、ユーザーがそのテーブル内のラジオボタンを選択するテーブルをクリックしてから、選択されたテーブルにクラスを追加することです。次に、そのラジオがチェックされているときにユーザーが別のテーブルを選択すると、クラスが追加されますが、以前に選択したテーブル/ラジオのクラスも削除する必要があります。

現在、そのほとんどが機能しています。別のラジオを選択しても、前のクラスは削除されません。ラジオを切り替えた場合にのみ、ラジオが削除されます。

すべての html およびその他の JS を表示できるjsfidd のデモへのリンクを次に示します。

$(function() {

    $('table').click(function(event) {

        if (event.target.type != "radio") {

            var that = $(this).find('input:radio');

            that.attr('checked', !that.is(':checked'));

            if (that.is(':checked')) {
            that.closest('table').addClass('selected');
            }
            else {
                that.closest('table').removeClass('selected');
            }
        }

    });
});

また、変更する前に別のバージョンを使用していたことを忘れていました。これでは、実際にラジオボタンをクリックすると、スタイルは正しく追加/削除されますが、テーブルをクリックすると削除されません。私は2つを組み合わせようとしましたが、それが私が上に投稿した機能を得た方法です..

これは、そのデモを含む jsfiddle へのリンクです。これも私が使用した jquery です。

// jQuery to select radio button within clicked table
$(function() {

$('table').click(function(event) {  

    if(event.target.type != "radio") {

        var that = $(this).find('input:radio');
        that.attr('checked', !that.is(':checked'));

    }
});
});

// jQuery to change the style of the table containing the selected radio button
$(function() {
$('input[type="radio"]').change( function() {
  //   grab all the radio buttons with the same name as the one just changed
    var this_radio_set = $('input[name="'+$(this).attr("name")+'"]');

    for (var i=0; i < this_radio_set.length;i++) {
    if ( $(this_radio_set[i]).is(':checked') )         
      $(this_radio_set[i]).closest('table').addClass('selected');
        else 
        $(this_radio_set[i]).closest('table').removeClass('selected');
}
});
});
4

2 に答える 2

0

次のようにする必要があります。

$(this).closest('.container').addClass('selected').parent().siblings().each(function() {
    $(this).find('.container').removeClass('selected');
});

そしてデモ: http://jsfiddle.net/cGTYm/22/

于 2012-06-14T05:58:33.920 に答える
0 
$(function() {
    $('table').click(function(event) {
        if (event.target.type != "radio") {
            var that = $(this).find('input:radio');
            that.attr('checked', !that.is(':checked'));

            $('table.selected').removeClass('selected');
            that.closest('table').addClass('selected');

        }
    });
});
于 2012-06-14T06:20:04.947 に答える