如果在 javascript 的表格行上选中复选框，则更新输入

Question

I have a table where each row has a checkbox and an input. The input can take a numerical value. To make things easy for the user, there is a separate input box that a user can enter a value, click a button which sets the input values of the selected rows in the table.

[ ] all  |  Name         | Amount
[ ]      | Marty         | [       ]
[x]      | Frank         | [       ]
[ ]      | Leslie        | [       ]

[ 123.45  ] (Set selected to full amount)

When clicking the button "Set selected to full amount", the amount input for Frank would get set to 123.45.

html:

<table>
  <thead>
  <tr>
    <th data-qaid='checkbox'><input type='checkbox'></th>
    <th data-qaid='name'>Name</th>
    <th data-qaid='amount'>Amount</th>
  </tr>
  </thead>
  <tbody>
  <tr data-qaid='datarow'>
    <td data-qaid='checkbox'>
      <input type='checkbox' name='selected' />
    </td>
    <td data-qaid='name'>
      <label>Marty</label>
    </td>
    <td data-qaid='amount'>
      <input type='number' name='amount' min='0' step='0.01' />
    </td>
  </tr>
  ...
  </tbody>
</table>
<input id='fullAmount' type='number' min='0' step='0.01' />
<button id='setFull'>Set selected to full amount</button>

javascript: This is the part where I need help with. I'm not sure how to determine if the checkbox is selected.

$(document).ready(function() {
  $('#setFull').onclick(function(e) {
    e.preventDefault();
    let fullAmount = $('#fullAmount').value();
    $('tr[data-qaid="datarow"]').each(function() {
      if ($(this).find('td[data-qaid="checkbox"] input').checked) {
        $(this).find('td[data-qaid="amount"] input').value = $fullAmount;
      }
    });
  });
});

I've got my attempt here: https://jsfiddle.net/cru1apo3/

Answer 1

I have tried this code and it works:

$(document).ready(function() {
    $('#setFull').click(function(e) {
        let fullAmount = $('#setAmount').val();
        $('tr[data-qaid="datarow"]').each(function() {
            if ($(this).find('td[data-qaid="checkbox"] input:checked').length) {
                $(this).find('td[data-qaid="amount"] input').val(fullAmount);
            }
        });
    });
});

Please, bare in mind this code only works if you put every checkboxes into a new tr tag, like this example:

<table>
    <thead>
        <tr>
            <th data-qaid='checkbox'><input type='checkbox'></th>
            <th data-qaid='name'>Name</th>
            <th data-qaid='amount'>Amount</th>
        </tr>
    </thead>
    <tbody>
        <tr data-qaid='datarow'>
            <td data-qaid='checkbox'>
                <input type='checkbox' name='selected' />
            </td>
            <td data-qaid='name'>
                <label>Marty</label>
            </td>
            <td data-qaid='amount'>
                 <input type='number' name='amount' min='0' step='0.01' />
            </td>
        </tr>
        <tr data-qaid='datarow'>
            <td data-qaid='checkbox'>
                <input type='checkbox' name='selected' />
            </td>
            <td data-qaid='name'>
                <label>Mary</label>
            </td>
            <td data-qaid='amount'>
                <input type='number' name='amount' min='0' step='0.01' />
            </td>
        </tr>
    </tbody>
</table>

Answer 2

I just quickly inspected your code you have some JavaScript errors, it would be cool if you could inspect them yourself and fix them, but anyway I'm going to explain to you a few things here, so here is the your fiddle that I edited: https://jsfiddle.net/fcqdn3su/1/

1. It looks like you were using jquery methods, but at the same time somehow forgot or confused vanilla DOM operations and jQuery methods. So in this case:

   $('#setFull').onclick(function(e) {

That line of code was not valid because onclick is not a jQuery method, of course in is built-in property of DOM element, so I changed onclick to click, you can also use on('click') syntax, if you want.

2. Also you check if checkbox is checked on each row, it should work fine in vanilla JavaScript but since you use jQuery selectors you need to use different syntax, there are a few ways to do it, so take a look at the jQuery docs about attr, prop or:checked properties, you will learn it quite easily.

3. Also when you assign or retrieve values, you need to use jQuery val method, not default value property. so fullAmount = $('#fullAmount').value(); becomes $('#fullAmount').val(); and also assigning amount should be like this: $(this).find('td[data-qaid="amount"] input').val(fullAmount);

After all the changes JavaScript code looks like this:

$(document).ready(function() {
  $('#setFull').click(function(e) {
    e.preventDefault();
    const fullAmount = $('#fullAmount').val();
    $('tr[data-qaid="datarow"]').each(function() {
      if ($(this).find('td[data-qaid="selected"] input[type=checkbox]:checked').length) {
        $(this).find('td[data-qaid="amount"] input').val(fullAmount);
      }
    })
  })
})