选中同一树上的复选框时更改td内的输入值

Question

这是我的代码：

<table class="table" id="ptable" >
    <thead>
        <tr>
            <th>CheckBoxes</th>
            <th>SL</th>
            <th>Product</th>
            <th>Qty</th>
        </tr>
    </thead>    
    <tbody>
        <tr>
            <td>
                <input type="checkbox" class="form-check-input" id="check_9">
            </td>
            <td>1</td>
            <td>Product-9
                <input type="number" class="pmqty" id="qty_9" name="qty[]" value="18">
            </td>
            <td>50</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" class="form-check-input" id="check_10">
            </td>
            <td>2</td>
            <td>Product-10
                <input type="number" class="pmqty" id="qty_10" name="qty[]" value="20">
            </td>
            <td>100</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" class="form-check-input" id="check_15">
            </td>
            <td>3</td>
            <td>Product-23
                <input type="number" class="pmqty" id="qty_15" name="qty[]" value="199">
            </td>
            <td>150</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" class="form-check-input" id="check_18">
            </td>
            <td>1</td>
            <td>Product-12
                <input type="number" class="pmqty" id="qty_18" name="qty[]" value="67">
            </td>
            <td>200</td>
        </tr>
    </tbody>
</table>

我正在寻找可以做到这一点的东西:如果你选中一行的复选框，td内部的输入字段的值将为零，如果再次取消选中，该值将被恢复。

如果这个表是动态创建的，那么我也可以在每个复选框或每个输入字段上使用Id。

Answer 1

最短的原生JS解决方案：

​

document.querySelectorAll('input[type="checkbox"]').forEach((el)=>{

el.onclick = function() {
input = el.parentElement.parentElement.querySelector('input[type="number"]');
input.value != 0?input.setAttribute('data-val',input.value):0;
input.value = input.value == input.getAttribute('data-val')?0:input.getAttribute('data-val');

}});

<table class="table" id="ptable" >
    <thead>
        <tr>
            <th>CheckBoxes</th>
            <th>SL</th>
            <th>Product</th>
            <th>Qty</th>
        </tr>
    </thead>    
    <tbody>
        <tr>
            <td>
                <input type="checkbox" class="form-check-input" id="check_9" >
            </td>
            <td>1</td>
            <td>Product-9
                <input type="number" class="pmqty" id="qty_9" name="qty[]" value="18">
            </td>
            <td>50</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" class="form-check-input" id="check_10">
            </td>
            <td>2</td>
            <td>Product-10
                <input type="number" class="pmqty" id="qty_10" name="qty[]" value="20">
            </td>
            <td>100</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" class="form-check-input" id="check_15">
            </td>
            <td>3</td>
            <td>Product-23
                <input type="number" class="pmqty" id="qty_15" name="qty[]" value="199">
            </td>
            <td>150</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" class="form-check-input" id="check_18">
            </td>
            <td>1</td>
            <td>Product-12
                <input type="number" class="pmqty" id="qty_18" name="qty[]" value="67">
            </td>
            <td>200</td>
        </tr>
    </tbody>
</table>

​

Answer 2

简单，如果单击复选框的值，

查找数据如果选中，则使用dom遍历()+

• ()到gt输入，将值存储在数据属性中(以便在取消选中后将其重置)，然后将值设置为0

• 如果未选中，则从已设置的数据属性中还原值。

$(".form-check-input").on('click'，function() { let $input = $(this).closest('tr').find('.pmqty')；if ($(this).is(":checked")) { $input.data("prev-value"，$input.val())；$input.val(0)；} else { $input.val($input.data("prev-value"))；} })

请参阅下面的工作代码片段：

​

$(function() {

  $(".form-check-input").on('click', function() {
    let $input = $(this).closest('tr').find('.pmqty');

    if ($(this).is(":checked")) {
      $input.data("prev-value", $input.val());
      $input.val(0);
      //if($input.length)

    } else {
      $input.val($input.data("prev-value"));

    }

  })

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table" id="ptable">
  <thead>
    <tr>
      <th>CheckBoxes</th>
      <th>SL</th>
      <th>Product</th>
      <th>Qty</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="checkbox" class="form-check-input" id="check_9">
      </td>
      <td>1</td>
      <td>Product-9
        <input type="number" class="pmqty" id="qty_9" name="qty[]" value="18">
      </td>
      <td>50</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" class="form-check-input" id="check_10">
      </td>
      <td>2</td>
      <td>Product-10
        <input type="number" class="pmqty" id="qty_10" name="qty[]" value="20">
      </td>
      <td>100</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" class="form-check-input" id="check_15">
      </td>
      <td>3</td>
      <td>Product-23
        <input type="number" class="pmqty" id="qty_15" name="qty[]" value="199">
      </td>
      <td>150</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" class="form-check-input" id="check_18">
      </td>
      <td>1</td>
      <td>Product-12
        <input type="number" class="pmqty" id="qty_18" name="qty[]" value="67">
      </td>
      <td>200</td>
    </tr>
  </tbody>
</table>

​

Answer 3

对于这个循环，我假设你有20个产品，顺序是从1到20：

for (var i = 1; i <= 20; i++) {
    var checkboxID = "#check_" + String(i);
    var numberID = "#qty_" + String(i);
    var checkbox = document.querySelector(checkboxID);
    var number = document.querySelector(numberID);
    number.setAttribute("hidden-number", number.value);
    checkbox.addEventListener("click", () => {
        if (number.value == 0) {
            number.value = number.getAttribute("hidden-number");
        }
        else {
            number.value = 0;
        }
        
    });
}

这个程序循环遍历所有的数字和复选框，并存储原始值，然后它设置一个切换，该切换将基于被单击或未被单击的复选框来切换值。我知道这不是一种传统的方法，但这是我对它的看法。