web-dev-qa-db-ja.com

テーブル行をクリックして、jQueryを使用してチェックボックスを選択します

以前に質問が見つからなかったため、テーブルの行をクリックしてチェックボックスを切り替える方法について、これに対する私のアプローチを共有したいと思います...

jquerycheckboxhtml-table
24
Mr. Alien

テーブル内の行のチェックボックスを選択するには、まず、対象の要素のtypeattributeがチェックボックスではないかどうかをチェックします。チェックボックスではない場合、そのテーブル行内にネストされているすべてのチェックボックスをチェックします。

_$(document).ready(function() {
  $('.record_table tr').click(function(event) {
    if (event.target.type !== 'checkbox') {
      $(':checkbox', this).trigger('click');
    }
  });
});
_

デモ

checkboxcheckedでテーブル行を強調表示する場合は、is(":checked")でif条件を使用できます。そうであれば、.closest()を使用して最も近いtr要素を見つけ、クラスを追加しますaddClass()を使用して

_$("input[type='checkbox']").change(function (e) {
    if ($(this).is(":checked")) { //If the checkbox is checked
        $(this).closest('tr').addClass("highlight_row"); 
        //Add class on checkbox checked
    } else {
        $(this).closest('tr').removeClass("highlight_row");
        //Remove class on checkbox uncheck
    }
});
_

デモ

80
Mr. Alien

この質問は役に立ちましたが、以前のソリューションに問題がありました。テーブルセル内のリンクをクリックすると、チェックボックスの切り替えがトリガーされます。私はこれをグーグルで検索し、テーブルのリンクに次のようにevent.stopPropagation()を追加する提案を見ました：

$('.record_table tr a').click(function(event) {
  event.stopPropagation();
});

テーブルのリンクにjquery bootstrap popover ...

だからここに私に合ったソリューションがあります。ところで、私はbootstrap 2.3を使用しているため、trに "info"クラスを追加することで行のハイライトが作成されます。このコードを使用するには、class="selectable"をテーブルタグに追加します。

$(".selectable tbody tr input[type=checkbox]").change(function(e){
  if (e.target.checked)
    $(this).closest("tr").addClass("info");
  else
    $(this).closest("tr").removeClass("info");
});

$(".selectable tbody tr").click(function(e){
  if (e.target.type != 'checkbox' && e.target.tagName != 'A'){
    var cb = $(this).find("input[type=checkbox]");
    cb.trigger('click');
  }
});

行に他の入力がある場合の例として、テスト条件をより具体的にしたいと思うでしょう。

7
Jérémie

上記の多くのソリューションのようにクリックをトリガーすると、関数が2回実行されます。代わりにprop値を更新します。

$('tr').click(function(event){
  alert('function runs twice');
  if(event.target.type !== 'checkbox'){
    //$(':checkbox', this).trigger('click');
    // Change property instead
    $(':checkbox', this).prop('checked', true);
  }
});

こちらのjsfiddleの例へのリンク

4
CR Rollyson

このクリックイベントをトリガーするだけです... :)

  $(document).ready(function()
    {
      $("table tr th :checkbox").click(function(event)
      {
        $('tbody :checkbox').trigger('click');
      });
    });

OR

  $(document).ready(function()
    {
      $("table tr th :checkbox").on('click',function(event)
      {
        $('tbody :checkbox').trigger('click');
      });
    });
0
Kalpesh Desai

たとえ受け入れられた@Mr。エイリアンの答えはうまく機能します。ある時点でjQueryを使用して新しい_<tr>_行を動的に追加する場合は機能しません。

イベント委任アプローチを使用することをお勧めします。これは、受け入れられた回答をわずかに修正したものです。

の代わりに：

... $('.record_table tr').click(function(event) { ...

つかいます

... $('.record_table').on('click', 'tr', function(event) { ...

また、強調表示についても同じように使用します：

... $(".record_table").on('change', "input[type='checkbox']", function (e) { ...

詳細情報： 動的に追加されたテーブル行に対してクリックイベントは発生しません

0
WojtylaCz