javascript - 复选框点击事件

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

功能齐全的片段。不需要 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>

效果非常好，您甚至可以设置复选框增加多少费用!