forms javascript - read data from table row when checkbox is checked in that row

asked on April 26, 2017 • Show version history

A checkbox was added to all tables in a form. They would like to read the data from other fields in the row when the checkbox is checked. There are 2 issues here. One is that the syntax I found online below is not working forms. It doesn't evaluate to true when the checkbox is checked even if I cycle through every single possible line of every single possible table looking for a checked box.

The other issue is that instead of checking every single line of every table for a checked box, can I just read the data from the fields in the row when they check the box?

    $('.cf-table-block tbody tr').each(function () {

      
      if ($(this).find('.myCheckBoxClass').checked) {alert('Hello World');}
      
      
            });

I never get a message saying Hello World, even when I have boxes checked within the tables.

0 0

replied on April 26, 2017 • Show version history

The checked attribute belongs to input fields of type="checked".

If you examine the page's HTML, you'll see that when you add a CSS class to a form field, it's added to its container:

That's why your code doesn't work. The td element on which the class is located doesn't have a checked attribute.

The input element is nested inside the container, so you need to select that. Each option in a checkbox field is its own input field.

The code below will show a popup when one of the checkboxes in a checkbox field becomes checked:

  $(".mycheckbox input").on("change", function() {
    if (this.checked) {
      alert("i am checked!"); 
    }
  });

If your checkbox field has multiple options and you want to trigger the event only for one of them, you can narrow down your selection by adding an attribute selector:

  $(".mycheckbox input[value=choice_1]").on("change", function() {
    if (this.checked) {
      alert("i am checked!"); 
    }
  });

That will attach the event handler only to the checkbox option with value "choice 1".

0 0

replied on April 27, 2017

Thank you this is helpful for individual elements.

But how do I know the values of the other fields in the row for which the user checked the box? This code appears to just run on any element with the class name mycheckbox in an isolated way, without access to other data in the row.

That was why I was using this loop, so that I can know which row I am on.

$('.cf-table-block tbody tr').each

0 0

Question

Question

forms javascript - read data from table row when checkbox is checked in that row

Replies

Sign in to reply to this post.