Question

我在表中有一组复选框，当选中该复选框时，我想在其中更改行中另一列的值。我已经研究过一种解决方案，但是没有发现似乎可以解决我的问题。我意识到我的绊脚石是我对jquery的不熟悉，因此任何建议都将有所帮助。最终，我希望对发生更改的列进行总计，以得出总计。因此，如果答案中也包含关于此的想法，我不会抱怨。一如既往的感谢，您是一个很棒的团体。

  HTML

    <tr>
        <td><input name="amputeeGolfer" type="checkbox" id="amputeeGolfer" value="amputee" onchange="changeFee"/>
            <label for="amputeeGolfer">Amputee Golfer</label></td>
        <td align="left"><label for="amputeeFee">$50.00</label></td>
        <td></td>
        <td><input name="amputeeFee" type="number" id="amputeeFee" class="tblRight" size="10" value="0.00"/></td>
   </tr>

jquery

   <script>
   function changeFee(val) {
     $('#amputeeFee').val(), "$50.00";
        }
   </script>

Answer 1

您可以获得最接近的tr closest('tr')，以确保输入与复选框在同一行中，并找到名称为find("input[name='amputeeFee']")的输入，并为其更改值。

function changeFee(val) {
   var amputeeFee = $(val).closest('tr').find("input[name='amputeeFee']");

   if($(val).prop("checked")){
       amputeeFee.val(50.00);
   }
   else{
      amputeeFee.val(0);
   }
}

function changeFee(val) {
var amputeeFee = $(val).closest('tr').find("input[name='amputeeFee']");
//console.log(amp.length);
if($(val).prop("checked")){
   amputeeFee.val(50.00);
}
else{
   amputeeFee.val(0);
}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
        <td><input name="amputeeGolfer" type="checkbox" id="amputeeGolfer" value="amputee" onchange="changeFee(this)"/>
            <label for="amputeeGolfer">Amputee Golfer</label></td>
        <td align="left"><label for="amputeeFee">$50.00</label></td>
        <td></td>
        <td><input name="amputeeFee" type="number" id="amputeeFee" class="tblRight" size="10" value="0.00"/></td>
   </tr>
   </table>

Answer 2

功能齐全的代码段。不需要jQuery！

在触发onchange事件时，它会检查该复选框是否刚刚被选中，并相应地切换价格。它甚至可以与其他各种复选框结合使用。

function togglePrice(element,price){
  if(element.checked){
    document.getElementById("amputeeFee").value = parseInt(document.getElementById("amputeeFee").value) + price;
  }else{
    document.getElementById("amputeeFee").value = parseInt(document.getElementById("amputeeFee").value) - price;
  }
}

<tr>
        <td><input name="amputeeGolfer" type="checkbox" id="amputeeGolfer" value="amputee" onchange="togglePrice(this,50);"/>
            <label for="amputeeGolfer">Amputee Golfer</label></td>
        <td align="left"><label for="amputeeFee">$50.00</label></td>
        <td></td>
        <td><input name="amputeeFee" type="number" id="amputeeFee" class="tblRight" size="10" value="0"/></td>
   </tr>

它运行完美，您甚至可以设置复选框增加的成本！

Answer 3

要在HTML的element事件中调用诸如changeFee(val)之类的JavaScript函数，必须在脚本中调用该函数。由于HTML事件中的所有函数都是<element onclick="myFunction()">，而不是<element onclick="myFunction">，因为它没有重新协调它是JavaScript中的函数。

然后代码将是：

<tr>
    <td><input name="amputeeGolfer" type="checkbox" id="amputeeGolfer" value="amputee" onchange="changeFee(this.value)"/>
        <label for="amputeeGolfer">Amputee Golfer</label></td>
    <td align="left"><label for="amputeeFee">$50.00</label></td>
    <td></td>
    <td><input name="amputeeFee" type="number" id="amputeeFee" class="tblRight" size="10" value="0.00"/></td>

复选框点击事件

3 个答案: