0

ユーザーが必要なセルを選択できるようにするグリッドを作成しようとしています。これにより、ラジオ ボタンが選択されます。理想的には、ラジオ ボタンを非表示にし、アクティブ セルにクラスを追加して、ユーザーが選択したものを認識できるようにします。私が今抱えている問題は、ユーザーがセルをクリックしたときにラジオボタンが選択されているのに、実際のラジオボタンがクリックされたときにのみクラスが追加されることです。また、別のボックスがクリックされたときにクラスが常に削除されるとは限りません。

これは、クラスを追加するために使用されるスクリプトです。

$(document).ready(function() {
    $("td input").change(function () {
        var $this = $(this);
        var td = $this.parent();
        td.siblings().filter(function() {
            return !!$(this).find('input[name="'+$this.attr('name')+'"]:radio').length;
        }).removeClass('activecell');
        if(this.checked) {
            td.addClass('activecell');
        }
    });
});

そしてページのデモ http://jsfiddle.net/VU6dN/

どんな助けでも大歓迎です。

4

2 に答える 2

1

ラジオ ボタンの代わりにクリック ハンドラーをセルに配置し、セルがクリックされたときにラジオ ボタンを選択し、それを非表示にするラジオ ボタンに CSS クラスを割り当てます。次のようなもの。また、これが機能する更新されたフィドルです。

$('td').click(function() {
    var $cell = $(this);
    $('td.activecell').removeClass('activecell');
    $cell.addClass('activecell');
    $cell.children('input').attr('checked', 'checked');
});
于 2013-03-27T21:24:55.333 に答える
1

HTML 内のこれらの厄介なonclickハンドラーを取り除き、.trigger('click')代わりにa を使用します。

  $('td').click(function () {
      $(this).find('input').trigger('click');
  });
于 2013-03-27T21:28:43.460 に答える