it-swarm.com.de

Klicken Sie auf Tabellenzeilen, um das Kontrollkästchen mit jQuery auszuwählen

Da ich zuvor keine Frage dazu gefunden habe, wie das Kontrollkästchen beim Klicken auf eine Tabellenzeile umgeschaltet werden kann, möchte ich meine Vorgehensweise hier mitteilen.

24
Mr. Alien

Um ein Ankreuzfeld einer Zeile in der Tabelle auszuwählen, prüfen wir zuerst, ob die Variable typeattribute des anzuzeigenden Elements kein Ankreuzfeld ist. Wenn es sich nicht um ein Kontrollkästchen handelt, werden alle in dieser Tabellenzeile verschachtelten Ankreuzfelder markiert.

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

Demo


Wenn Sie die Tabellenzeile auf checkboxchecked markieren möchten, können Sie eine if-Bedingung mit is(":checked") verwenden. Wenn ja, finden wir das nächstliegende tr-Element mit .closest() und fügen dann mit addClass() eine Klasse hinzu.

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

Demo

76
Mr. Alien

Diese Frage war für mich nützlich, aber ich hatte ein Problem mit der vorherigen Lösung. Wenn Sie auf einen Link in einer Tabellenzelle klicken, wird das Kontrollkästchen aktiviert. Ich googelte und sah den Vorschlag, den Links der Tabelle ein event.stopPropagation() hinzuzufügen:

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

Diese Lösung war eine schlechte Idee, da ich einen Jquery-Bootstrap-Popover auf einem Link der Tabelle hatte ...

Also hier eine Lösung, die besser zu mir passt. Übrigens, da ich bootstrap 2.3 verwende, wird die Hervorhebung der Zeile durch Hinzufügen der "info" -Klasse zum tr ..__ vorgenommen. Um diesen Code zu verwenden, müssen Sie lediglich class="selectable" zum table-Tag hinzufügen.

$(".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');
  }
});

Möglicherweise möchten Sie die Testbedingung genauer festlegen, beispielsweise, wenn Sie andere Eingaben in der Zeile haben.

7
Jérémie

Das Auslösen eines Klicks wie bei vielen der oben genannten Lösungen führt dazu, dass die Funktion zweimal ausgeführt wird. Aktualisieren Sie stattdessen den Requisitenwert:

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

Link zum jsfiddle-Beispiel hier

3
CR Rollyson

Sie können dieses Klickereignis einfach auslösen ... :) 

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

ODER 

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

Obwohl die akzeptierte @Mr. Die Alien-Antwort funktioniert gut, sie funktioniert nicht, wenn Sie sich dazu entscheiden, irgendwann eine neue <tr>-Zeile dynamisch mit jQuery hinzuzufügen.

Ich empfehle einen Event-Delegations-Ansatz, der nur eine geringfügige Änderung der akzeptierten Antwort darstellt.

Anstatt:

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

benutzen

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

Und das gleiche für die Hervorhebung:

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

Weitere Informationen hier: Click-Ereignis wird nicht für dynamisch hinzugefügte Tabellenzeilen ausgelöst

0
WojtylaCz