CODEWITHSUNDEEP
javascriptjqueryhtml
Scott A
Scott A

Reputation: 49

Checkbox click event

I have a group of checkboxes inside a table where I want to change the value of a different column in the row when the checkbox is checked. I have researched for a solution but nothing I have found seems to solve my problem. I realize that my stumbling block is my unfamiliarity with jquery so any suggestions would help. Ultimately I wish to total the columns where the change has occurred to get a total. So if an answer included ideas about that as well I would not complain. Thanks as always, you are a great group.

  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>

Upvotes: 1

Views: 533

Answers (3)

Hien Nguyen
Hien Nguyen

Reputation: 18973

You can get closest tr closest('tr') to assure input in same row with check box and find input with name find("input[name='amputeeFee']") and change value for it.

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>

Upvotes: 0

nCoder
nCoder

Reputation: 106

Fully functioning snippet. No jQuery required!

When the onchange event fires, it checks whether the checkbox was just checked or unchecked, and toggles the price accordingly. It can even be combined with all sorts of other checkboxes.

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>

It works perfectly and you can even set how much the checkbox adds to the cost!

Upvotes: 1

Gabry
Gabry

Reputation: 22

To call a JavaScript function like changeFee(val) in an HTML's element event, the funciton has to be called as the same in the script. As all functions in an HTML' event: <element onclick="myFunction()">, and not <element onclick="myFunction"> beacuse it doesn't reconize it's a function in JavaScript.

Then the code will be:

<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>

Upvotes: 0

Related Questions