如果在 javascript 的表格行上選中復選框，則更新輸入

Question

我有一個表格，其中每一行都有一個復選框和一個輸入。 輸入可以采用數值。 為了方便用戶，有一個單獨的輸入框，用戶可以輸入一個值，單擊一個按鈕，設置表格中所選行的輸入值。

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

[ 123.45  ] (Set selected to full amount)

當單擊“設置為全部金額”按鈕時，Frank 輸入的金額將設置為 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：這是我需要幫助的部分。 我不確定如何確定復選框是否被選中。

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

我在這里嘗試過： https://jsfiddle.net/cru1apo3/

Answer 1

我已經嘗試過這段代碼並且它有效：

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

請記住，僅當您將每個復選框都放入新的 tr 標簽時，此代碼才有效，例如以下示例：

<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

我只是快速檢查了您的代碼，您有一些 JavaScript 錯誤，如果您可以自己檢查並修復它們會很酷，但無論如何我要在這里向您解釋一些事情，所以這是我編輯的小提琴: https://jsfiddle.net/fcqdn3su/1/

1. 看起來您正在使用 jquery 方法，但同時不知何故忘記或混淆了 vanilla DOM 操作和 jQuery 方法。 所以在這種情況下：

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

那行代碼是無效的，因為onclick不是 jQuery 方法，當然是 DOM 元素的內置屬性，所以我更改了 onclick 到點擊，'如果你想'也可以使用'語法。

2. 您還檢查是否檢查了每一行上的復選框，它應該在原版 JavaScript 中正常工作，但由於您使用 jQuery 選擇器，您需要使用不同的語法，有幾種方法可以做到這一點，所以看看 ZF590B4FDAC32C30BE28BZDD3C8 關於 Ctr32AF50BE28BZDD3C8 , prop or:checked properties，你會很容易學會。

3. 此外，當您分配或檢索值時，您需要使用 jQuery val方法，而不是默認值屬性。 所以 fullAmount = $('#fullAmount').value(); 變成 $('#fullAmount').val(); 並且分配金額應該是這樣的： $(this).find('td[data-qaid="amount"] input').val(fullAmount);

在所有更改后 JavaScript 代碼如下所示：

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