Search code examples
jquerycheckboxicheck

Compare Checkbox and Input Values

Issue:

I'm trying to compare a checkbox value to an input value in the same table row. I'm comparing them on keyup. When a user fills in a value in the textbox it compares that value to the value of the checkbox. If the values are equal, I want the checkbox to enter a checked state.

Interestingly, my code does this, but only on the first instance of the checkbox/input. Note that I am using the icheck plugin, so I'm using some custom events. Any help in the right direction is appreciated.

Please see the snippet below.

$(function() {
  var payFull = $('input[type="checkbox"].payfull');
  var payNow = $('input[type="text"].paynow');
  var payAmt = $('#amounttopay');

  // Recalc Function
  function reCalc() {
      var sum = 0;
      payNow.each(function() {
        sum += Number($(this).val());
      });
      if (!isNaN(sum) && sum.length !== 0) {
        payAmt.html('$' + sum.toFixed(2));
      } else {
        payAmt.html('$0.00');
      }
    }
    // When Pay in Full Checkbox is Checked fill in Pay This Time Field with Invoice Amount Due Value
  payFull.on('ifChecked', function(event) {
    var val = $(this).val().replace('$', '');
    var price = $(this).closest('tr').find('input[type="text"]').val(val);
    price;
    reCalc;
  });

  // If Pay in Full Unchecked then remove value from respective Pay This Time Input
  //if (event.target.checked === true) { // Only bind the ifUnchecked event if the checkbox is checked
    payFull.on('ifUnchecked', function(event) {
      var removePrice = $(this).closest('tr').find(payNow).val('');
      $(removePrice);
      $(reCalc);
    });
  //}

  // If Pay This Time changes recalculate total
  var payFullVal = payFull.val().replace('$', '');
  payNow.keyup(function(event) {
    //  If Checkbox and Input values DO NOT match
    if (payFullVal !== $(this).val()) {
      $(this).closest('tr').find(payFull).iCheck('uncheck');
    }
    //  If Checkbox and Input values DO match
    else if (payFullVal == $(this).val()) {
      $(this).closest('tr').find(payFull).iCheck('check');
    } else {}
    $(reCalc);
  });
});
/* iCheck plugin Square skin, blue
----------------------------------- */

.icheckbox_square-blue,
.iradio_square-blue {
  display: inline-block;
  *display: inline;
  vertical-align: middle;
  margin: 0;
  padding: 0;
  width: 22px;
  height: 22px;
  background: url(https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.1/skins/square/blue.png) no-repeat;
  border: none;
  cursor: pointer;
}
.icheckbox_square-blue {
  background-position: 0 0;
}
.icheckbox_square-blue.hover {
  background-position: -24px 0;
}
.icheckbox_square-blue.checked {
  background-position: -48px 0;
}
.icheckbox_square-blue.disabled {
  background-position: -72px 0;
  cursor: default;
}
.icheckbox_square-blue.checked.disabled {
  background-position: -96px 0;
}
.iradio_square-blue {
  background-position: -120px 0;
}
.iradio_square-blue.hover {
  background-position: -144px 0;
}
.iradio_square-blue.checked {
  background-position: -168px 0;
}
.iradio_square-blue.disabled {
  background-position: -192px 0;
  cursor: default;
}
.iradio_square-blue.checked.disabled {
  background-position: -216px 0;
}
/* Retina support */

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
  .icheckbox_square-blue,
  .iradio_square-blue {
    background-image: url(blue@2x.png);
    -webkit-background-size: 240px 24px;
    background-size: 240px 24px;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.1/icheck.min.js"></script>
<script>
  $(function() {
    $('#datatable input[type=checkbox]').iCheck({
      checkboxClass: 'icheckbox_square-blue',
      increaseArea: '10%' // optional
    });
  });
</script>
<table class="table table-bordered" id="datatable">
  <thead>
    <tr>
      <th class="text-center view">View</th>
      <th class="text-center">Invoice Date</th>
      <th class="text-center">Invoice #</th>
      <th class="text-center">PO #</th>
      <th class="text-center">Invoice Amount</th>
      <th class="text-center">Amount Due</th>
      <th class="text-center">Pay In Full</th>
      <th class="text-center">Pay This Time</th>
    </tr>
  </thead>
  <tfoot>
    <tr class="foot">
      <th class="text-left">
        <h5 class="semibold text-uppercase nm ml5">Pay This Time</h5>
      </th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
      <th class="text-right">
        <h3 class="semibold nm mr5" id="amounttopay">$0.00</h3>
      </th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td class="text-center">
        <label>
          <input class="view-detail" data-contextual="selected" data-target="tr" data-toggle="selectrow" name="SPI_Inv_Select" type="checkbox" value="SPI_Inv_Num">
        </label>
      </td>
      <td class="text-center">SPI_Inv_Date</td>
      <td class="text-center"><a class="uline" href='#'>SPI_Inv_Num</a>
      </td>
      <td class="text-center">SPI_Inv_PONum</td>
      <td class="text-right">SPI_Inv_Amt</td>
      <td class="text-right">SPI_Inv_DueAmt</td>
      <td class="text-center payinfull">
        <input class="payfull" name="SPI_InvPay_Select" type="checkbox" value="$109.92">
      </td>
      <td class="text-center paythistime">
        <div class="input-group"> <span class="input-group-addon">$</span>
          <input class="form-control paynow" data-parsley-error-message="Invalid Character" data-parsley-errors-container=".one" data-parsley-pattern="^\d+(,\d{1,2})?$" type="text">
        </div>
        <span class="one"></span>
      </td>
    </tr>
    <tr>
      <td class="text-center view">
        <label>
          <input class="view-detail" data-contextual="selected" data-target="tr" data-toggle="selectrow" name="SPI_Inv_Select" type="checkbox" value="SPI_Inv_Num">
        </label>
      </td>
      <td class="text-center">SPI_Inv_Date</td>
      <td class="text-center"> <a class="uline" href='#'>SPI_Inv_Num</a>
      </td>
      <td class="text-center">SPI_Inv_PONum</td>
      <td class="text-right">SPI_Inv_Amt</td>
      <td class="text-right">SPI_Inv_DueAmt</td>
      <td class="text-center payinfull">
        <input class="payfull" name="SPI_InvPay_Select" type="checkbox" value="$6.65">
      </td>
      <td class="text-center paythistime">
        <div class="input-group"> <span class="input-group-addon">$</span>
          <input class="form-control paynow" data-parsley-error-message="Invalid Character" data-parsley-errors-container=".two" data-parsley-pattern="^\d+(,\d{1,2})?$" type="text">
        </div>
        <span class="two"></span>
      </td>
    </tr>
  </tbody>
</table>

Solution

  • This might help you 

    var payFull = $('input[type="checkbox"].payfull');
var payNow = $('input[type="text"].paynow');
var payAmt = $('#amounttopay');

payFull.on('ifChecked', function(event) {
  $(this).parents('tr').find('.paynow').val($(this).val());
  Calc();
});
payFull.on('ifUnchecked', function(event) {
  if ($(this).parents('tr').find('.paynow').val() == $(this).val()) {
    $(this).parents('tr').find('.paynow').val('')
    Calc();
  }
});
$('.paynow').keyup(function() {
  var $ThisCheck = $(this).parents('tr').find('.payfull')
  if ($(this).val() == $ThisCheck.val()) {
    $ThisCheck.iCheck('check');
  } else {
    $ThisCheck.iCheck('uncheck');
  }
  Calc();
})

function Calc() {
  var Sum = 0;
  $('.paynow').each(function(index, Obj) {
    var value = parseFloat($(this).val());
    if (!isNaN(value)) Sum += value
  })
  $('#amounttopay').text(Sum.toFixed(2));
}
    /* iCheck plugin Square skin, blue
----------------------------------- */

.icheckbox_square-blue,
.iradio_square-blue {
  display: inline-block;
  *display: inline;
  vertical-align: middle;
  margin: 0;
  padding: 0;
  width: 22px;
  height: 22px;
  background: url(https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.1/skins/square/blue.png) no-repeat;
  border: none;
  cursor: pointer;
}
.icheckbox_square-blue {
  background-position: 0 0;
}
.icheckbox_square-blue.hover {
  background-position: -24px 0;
}
.icheckbox_square-blue.checked {
  background-position: -48px 0;
}
.icheckbox_square-blue.disabled {
  background-position: -72px 0;
  cursor: default;
}
.icheckbox_square-blue.checked.disabled {
  background-position: -96px 0;
}
.iradio_square-blue {
  background-position: -120px 0;
}
.iradio_square-blue.hover {
  background-position: -144px 0;
}
.iradio_square-blue.checked {
  background-position: -168px 0;
}
.iradio_square-blue.disabled {
  background-position: -192px 0;
  cursor: default;
}
.iradio_square-blue.checked.disabled {
  background-position: -216px 0;
}
/* Retina support */

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
  .icheckbox_square-blue,
  .iradio_square-blue {
    background-image: url(blue@2x.png);
    -webkit-background-size: 240px 24px;
    background-size: 240px 24px;
  }
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.1/icheck.min.js"></script>
<script>
  $(function() {
    $('#datatable input[type=checkbox]').iCheck({
      checkboxClass: 'icheckbox_square-blue',
      increaseArea: '10%' // optional
    });
  });
</script>
<table class="table table-bordered" id="datatable">
  <thead>
    <tr>
      <th class="text-center">Pay In Full</th>
      <th class="text-center">Pay This Time</th>
    </tr>
  </thead>
  <tfoot>
    <tr class="foot">
      <th></th>
      <th class="text-right">
        <h3 class="semibold nm mr5" id="amounttopay">$0.00</h3>

      </th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td class="text-center payinfull">
        <input class="payfull" name="SPI_InvPay_Select" type="checkbox" value="109.92" />
      </td>
      <td class="text-center paythistime">
        <div class="input-group"> <span class="input-group-addon">$</span>

          <input class="form-control paynow" data-parsley-error-message="Invalid Character" data-parsley-errors-container=".one" data-parsley-pattern="^\d+(,\d{1,2})?$" type="text" />109.92
        </div> <span class="one"></span>
      </td>
    </tr>
    <tr>
      <td class="text-center payinfull">
        <input class="payfull" name="SPI_InvPay_Select" type="checkbox" value="6.65" />
      </td>
      <td class="text-center paythistime">
        <div class="input-group"> <span class="input-group-addon">$</span>

          <input class="form-control paynow" data-parsley-error-message="Invalid Character" data-parsley-errors-container=".two" data-parsley-pattern="^\d+(,\d{1,2})?$" type="text" />6.65
        </div> <span class="two"></span>

      </td>
    </tr>
    <tr>
      <td class="text-center payinfull">
        <input class="payfull" name="SPI_InvPay_Select" type="checkbox" value="16.65" />
      </td>
      <td class="text-center paythistime">
        <div class="input-group"> <span class="input-group-addon">$</span>
          <input class="form-control paynow" data-parsley-error-message="Invalid Character" data-parsley-errors-container=".two" data-parsley-pattern="^\d+(,\d{1,2})?$" type="text" />16.65
        </div> <span class="two"></span>

      </td>
    </tr>
  </tbody>
</table>