Skip to main content
edited body
Source Link

I would not use IDs, but a identifier for all your checkboxes, a class, obviously.

And I would stockstore each values in an array instead of many vars.

$(function() {
  // The collections of elements :
  var $tcbxCollection = $('.tcbx');

  // get the values of this collection :
  var tcbxValues = getCheckboxesValues($tcbxCollection);

  $('body' /* or the parent container */ ).on('click', function() {
    tcbxValues = getCheckboxesValues($tcbxCollection);
    console.log(tcbxValues);
  });

  // The function to put the important values.
  function getCheckboxesValues($collection) {
    var checkboxValues = [];

    $collection.each(function(i, element) {
      checkboxValues[i] = $(element).is(':checked') ?
        parseFloat($(element).attr('value'), 10) : 0;
    });

    return checkboxValues;
  }

});
<input class="tcbx" type="checkbox" value="10.66666" />
<input class="tcbx" type="checkbox" value="28.45368789" />
<input class="tcbx" type="checkbox" value="32.5" />
<input class="tcbx" type="checkbox" value="4.5456" />
<input class="tcbx" type="checkbox" value="54.786" />
<input class="tcbx" type="checkbox" value="65" />
<input class="tcbx" type="checkbox" value="7.56464" />
<input class="tcbx" type="checkbox" value="8.7789" />
<p>Look on the console...</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

I would not use IDs, but a identifier for all your checkboxes, a class, obviously.

And I would stock each values in an array instead of many vars.

$(function() {
  // The collections of elements :
  var $tcbxCollection = $('.tcbx');

  // get the values of this collection :
  var tcbxValues = getCheckboxesValues($tcbxCollection);

  $('body' /* or the parent container */ ).on('click', function() {
    tcbxValues = getCheckboxesValues($tcbxCollection);
    console.log(tcbxValues);
  });

  // The function to put the important values.
  function getCheckboxesValues($collection) {
    var checkboxValues = [];

    $collection.each(function(i, element) {
      checkboxValues[i] = $(element).is(':checked') ?
        parseFloat($(element).attr('value'), 10) : 0;
    });

    return checkboxValues;
  }

});
<input class="tcbx" type="checkbox" value="10.66666" />
<input class="tcbx" type="checkbox" value="28.45368789" />
<input class="tcbx" type="checkbox" value="32.5" />
<input class="tcbx" type="checkbox" value="4.5456" />
<input class="tcbx" type="checkbox" value="54.786" />
<input class="tcbx" type="checkbox" value="65" />
<input class="tcbx" type="checkbox" value="7.56464" />
<input class="tcbx" type="checkbox" value="8.7789" />
<p>Look on the console...</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

I would not use IDs, but a identifier for all your checkboxes, a class, obviously.

And I would store each values in an array instead of many vars.

$(function() {
  // The collections of elements :
  var $tcbxCollection = $('.tcbx');

  // get the values of this collection :
  var tcbxValues = getCheckboxesValues($tcbxCollection);

  $('body' /* or the parent container */ ).on('click', function() {
    tcbxValues = getCheckboxesValues($tcbxCollection);
    console.log(tcbxValues);
  });

  // The function to put the important values.
  function getCheckboxesValues($collection) {
    var checkboxValues = [];

    $collection.each(function(i, element) {
      checkboxValues[i] = $(element).is(':checked') ?
        parseFloat($(element).attr('value'), 10) : 0;
    });

    return checkboxValues;
  }

});
<input class="tcbx" type="checkbox" value="10.66666" />
<input class="tcbx" type="checkbox" value="28.45368789" />
<input class="tcbx" type="checkbox" value="32.5" />
<input class="tcbx" type="checkbox" value="4.5456" />
<input class="tcbx" type="checkbox" value="54.786" />
<input class="tcbx" type="checkbox" value="65" />
<input class="tcbx" type="checkbox" value="7.56464" />
<input class="tcbx" type="checkbox" value="8.7789" />
<p>Look on the console...</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Source Link

I would not use IDs, but a identifier for all your checkboxes, a class, obviously.

And I would stock each values in an array instead of many vars.

$(function() {
  // The collections of elements :
  var $tcbxCollection = $('.tcbx');

  // get the values of this collection :
  var tcbxValues = getCheckboxesValues($tcbxCollection);

  $('body' /* or the parent container */ ).on('click', function() {
    tcbxValues = getCheckboxesValues($tcbxCollection);
    console.log(tcbxValues);
  });

  // The function to put the important values.
  function getCheckboxesValues($collection) {
    var checkboxValues = [];

    $collection.each(function(i, element) {
      checkboxValues[i] = $(element).is(':checked') ?
        parseFloat($(element).attr('value'), 10) : 0;
    });

    return checkboxValues;
  }

});
<input class="tcbx" type="checkbox" value="10.66666" />
<input class="tcbx" type="checkbox" value="28.45368789" />
<input class="tcbx" type="checkbox" value="32.5" />
<input class="tcbx" type="checkbox" value="4.5456" />
<input class="tcbx" type="checkbox" value="54.786" />
<input class="tcbx" type="checkbox" value="65" />
<input class="tcbx" type="checkbox" value="7.56464" />
<input class="tcbx" type="checkbox" value="8.7789" />
<p>Look on the console...</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>