title: Compare Checkbox and Input Values
body: <p><strong>Issue:</strong></p>
  
  <p>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. </p>
  
  <p>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.</p>
  
  <p><strong>Please see the snippet below.</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(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) &amp;&amp; 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);
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* 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;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.1/icheck.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
    $(function() {
      $('#datatable input[type=checkbox]').iCheck({
        checkboxClass: 'icheckbox_square-blue',
        increaseArea: '10%' // optional
      });
    });
  &lt;/script&gt;
  &lt;table class="table table-bordered" id="datatable"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th class="text-center view"&gt;View&lt;/th&gt;
        &lt;th class="text-center"&gt;Invoice Date&lt;/th&gt;
        &lt;th class="text-center"&gt;Invoice #&lt;/th&gt;
        &lt;th class="text-center"&gt;PO #&lt;/th&gt;
        &lt;th class="text-center"&gt;Invoice Amount&lt;/th&gt;
        &lt;th class="text-center"&gt;Amount Due&lt;/th&gt;
        &lt;th class="text-center"&gt;Pay In Full&lt;/th&gt;
        &lt;th class="text-center"&gt;Pay This Time&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tfoot&gt;
      &lt;tr class="foot"&gt;
        &lt;th class="text-left"&gt;
          &lt;h5 class="semibold text-uppercase nm ml5"&gt;Pay This Time&lt;/h5&gt;
        &lt;/th&gt;
        &lt;th&gt;&lt;/th&gt;
        &lt;th&gt;&lt;/th&gt;
        &lt;th&gt;&lt;/th&gt;
        &lt;th&gt;&lt;/th&gt;
        &lt;th&gt;&lt;/th&gt;
        &lt;th&gt;&lt;/th&gt;
        &lt;th class="text-right"&gt;
          &lt;h3 class="semibold nm mr5" id="amounttopay"&gt;$0.00&lt;/h3&gt;
        &lt;/th&gt;
      &lt;/tr&gt;
    &lt;/tfoot&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td class="text-center"&gt;
          &lt;label&gt;
            &lt;input class="view-detail" data-contextual="selected" data-target="tr" data-toggle="selectrow" name="SPI_Inv_Select" type="checkbox" value="SPI_Inv_Num"&gt;
          &lt;/label&gt;
        &lt;/td&gt;
        &lt;td class="text-center"&gt;SPI_Inv_Date&lt;/td&gt;
        &lt;td class="text-center"&gt;&lt;a class="uline" href='#'&gt;SPI_Inv_Num&lt;/a&gt;
        &lt;/td&gt;
        &lt;td class="text-center"&gt;SPI_Inv_PONum&lt;/td&gt;
        &lt;td class="text-right"&gt;SPI_Inv_Amt&lt;/td&gt;
        &lt;td class="text-right"&gt;SPI_Inv_DueAmt&lt;/td&gt;
        &lt;td class="text-center payinfull"&gt;
          &lt;input class="payfull" name="SPI_InvPay_Select" type="checkbox" value="$109.92"&gt;
        &lt;/td&gt;
        &lt;td class="text-center paythistime"&gt;
          &lt;div class="input-group"&gt; &lt;span class="input-group-addon"&gt;$&lt;/span&gt;
            &lt;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"&gt;
          &lt;/div&gt;
          &lt;span class="one"&gt;&lt;/span&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td class="text-center view"&gt;
          &lt;label&gt;
            &lt;input class="view-detail" data-contextual="selected" data-target="tr" data-toggle="selectrow" name="SPI_Inv_Select" type="checkbox" value="SPI_Inv_Num"&gt;
          &lt;/label&gt;
        &lt;/td&gt;
        &lt;td class="text-center"&gt;SPI_Inv_Date&lt;/td&gt;
        &lt;td class="text-center"&gt; &lt;a class="uline" href='#'&gt;SPI_Inv_Num&lt;/a&gt;
        &lt;/td&gt;
        &lt;td class="text-center"&gt;SPI_Inv_PONum&lt;/td&gt;
        &lt;td class="text-right"&gt;SPI_Inv_Amt&lt;/td&gt;
        &lt;td class="text-right"&gt;SPI_Inv_DueAmt&lt;/td&gt;
        &lt;td class="text-center payinfull"&gt;
          &lt;input class="payfull" name="SPI_InvPay_Select" type="checkbox" value="$6.65"&gt;
        &lt;/td&gt;
        &lt;td class="text-center paythistime"&gt;
          &lt;div class="input-group"&gt; &lt;span class="input-group-addon"&gt;$&lt;/span&gt;
            &lt;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"&gt;
          &lt;/div&gt;
          &lt;span class="two"&gt;&lt;/span&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>