javascriptjquerycheckboxjquery-click-event

I want to set my checkbox on "checked" when i click a specific td in my table


Hei guys. I want my Checkbox to be "checked" after i click the last td field of a row. I tried it with JQuery but unfortunately i always checked all checkboxes. I just want to check the td at the row i clicked.

Thats how i build my table.

<table class="table table-striped" id="notfallTable">
    <tr>
        <th value="name">Name</th>
        <th>Nachname</th>
        <th>Nummer</th>
        <th>Abteilung</th>
        <th id="thCheckbox"><button id="checkAll" class="btn btn-success">Check all</button>
        </th>
   </tr>
</table>
$.getJSON("NotfallSMS.json", function(data){
    var items=[];
    var checkbox="test";
    $.each(data, function(key, val){
        items.push("<tr>");
        items.push("<td contenteditable>"+val.Name+"</td>");
        items.push("<td contenteditable>"+val.Nachname+"</td>");
        items.push("<td contenteditable>"+val.Nummer+"</td>");
        items.push("<td contenteditable>"+val.Abteilung+"</td>")
        items.push("<td class='check'><input class='check' type='checkbox'>"+""+"</input></td>");

        items.push("</tr>");
    });
    $("<tbody/>", {html: items.join("")}).appendTo("table");
});

I hope you can help me out. Greetings Elfdow


Solution

  • To achieve this you can hook a click event handler to the td.check elements which uses find() to retrieve the checkbox within the cell and toggles its checked property, like this:

    $('tr td.check').on('click', function() {
      $(this).find(':checkbox').prop('checked', (i, checked) => !checked);
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <table class="table table-striped" id="notfallTable">
      <tr>
        <th value="name">Name</th>
        <th>Nachname</th>
        <th>Nummer</th>
        <th>Abteilung</th>
        <th id="thCheckbox"><button id="checkAll" class="btn btn-success">Check all</button>
        </th>
      </tr>
      <tbody>
        <tr>
          <td contenteditable>val.Name</td>
          <td contenteditable>val.Nachname</td>
          <td contenteditable>val.Nummer</td>
          <td contenteditable>val.Abteilung</td>
          <td class="check"><input class="check" type="checkbox" /></td>
        </tr>
        <tr>
          <td contenteditable>val.Name</td>
          <td contenteditable>val.Nachname</td>
          <td contenteditable>val.Nummer</td>
          <td contenteditable>val.Abteilung</td>
          <td class="check"><input class="check" type="checkbox" /></td>
        </tr>
      </tbody>
    </table>

    However it's worth noting that you can achieve the exact same behaviour without JS or jQuery by using CSS instead. Wrap the checkbox in a label and use CSS to set it to display: block:

    label {
      display: block;
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <table class="table table-striped" id="notfallTable">
      <tr>
        <th value="name">Name</th>
        <th>Nachname</th>
        <th>Nummer</th>
        <th>Abteilung</th>
        <th id="thCheckbox"><button id="checkAll" class="btn btn-success">Check all</button>
        </th>
      </tr>
      <tbody>
        <tr>
          <td contenteditable>val.Name</td>
          <td contenteditable>val.Nachname</td>
          <td contenteditable>val.Nummer</td>
          <td contenteditable>val.Abteilung</td>
          <td class="check"><label><input class="check" type="checkbox" /></label></td>
        </tr>
        <tr>
          <td contenteditable>val.Name</td>
          <td contenteditable>val.Nachname</td>
          <td contenteditable>val.Nummer</td>
          <td contenteditable>val.Abteilung</td>
          <td class="check"><label><input class="check" type="checkbox" /></label></td>
        </tr>
      </tbody>
    </table>