Revisions to Shorter code for adding checkboxes

added 2 characters in body

Source Link

edited Jan 9, 2015 at 11:42

577
2
8

$('#pricing').on( 'click', '[type=checkbox]', function (e) {
    // all checked checkboxes in #pricing
    var totamount = $('#totalamount').hide();
    var total = $('#pricing > [type=checkbox]:checked') 
                .toArray()                       //<= convert to array 
                .reduce( function (a, b) {       //<= calculate sum
                          return a + (+b.value); //<= + operator converts to Number
                         },0 );
    $('#total')totamount.html( total == 0 ? 'total: 0' : 'total: ' + total.toFixed(2) ).fadeIn();
});

$('#addcbx').on('click', function (e) {
    var amount = $('#cbvalue').val();
    if (!amount || amount ==< 0.001) {
      return true;
    }
    var nwcbx = $('<input type="checkbox" value="' + amount + '" \/> '+ amount+ '<br>')
                  .insertBefore($('#total'));
});

body {
  margin: 2em;
  font: 0.8em/1em normal verdana, arial;
}

#total {
  width: 150px;
  border-top: 1px solid #ddd;
  padding-top: 5px;
}

#totalamount {
  font-weight: bold;
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pricing">
  <input type="checkbox" value=100.00 /> 100.00<br>
  <input type="checkbox" value=231.00 /> 231.00<br>
  <input type="checkbox" value=521.99 /> 521.99<br>
  <input type="checkbox" value=22.25 /> 22.25<br>
  <input type="checkbox" value=36.55 /> 36.55<br>
  <input type="checkbox" value=96.32 /> 96.32<br>
  <input type="checkbox" value=5.50 /> 5.50<br>
  <div id="total">total: 0<<span id="totalamount">0</div>
</div>

<p>
  <input type="number" id="cbvalue" placeholder="amount" step="0.01" min="0.00" value="0.00"/>
  <button id="addcbx">add checkbox for amount</button>
</p>

$('#pricing').on( 'click', '[type=checkbox]', function (e) {
    // all checked checkboxes in #pricing
    var total = $('#pricing > [type=checkbox]:checked') 
                .toArray()                       //<= convert to array 
                .reduce( function (a, b) {       //<= calculate sum
                          return a + (+b.value); //<= + operator converts to Number
                         },0 );
    $('#total').html( total == 0 ? 'total: 0' : 'total: ' + total.toFixed(2) );
});

$('#addcbx').on('click', function (e) {
    var amount = $('#cbvalue').val();
    if (!amount || amount == 0) {
      return true;
    }
    var nwcbx = $('<input type="checkbox" value="' + amount + '" \/> '+ amount+ '<br>')
                  .insertBefore($('#total'));
});

body {
  margin: 2em;
  font: 0.8em/1em normal verdana, arial;
}

#total {
  width: 150px;
  border-top: 1px solid #ddd;
  padding-top: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pricing">
  <input type="checkbox" value=100.00 /> 100.00<br>
  <input type="checkbox" value=231.00 /> 231.00<br>
  <input type="checkbox" value=521.99 /> 521.99<br>
  <input type="checkbox" value=22.25 /> 22.25<br>
  <input type="checkbox" value=36.55 /> 36.55<br>
  <input type="checkbox" value=96.32 /> 96.32<br>
  <input type="checkbox" value=5.50 /> 5.50<br>
  <div id="total">total: 0</div>
</div>

<p>
  <input type="number" id="cbvalue" placeholder="amount" step="0.01" min="0.00" value="0.00"/>
  <button id="addcbx">add checkbox for amount</button>
</p>

$('#pricing').on( 'click', '[type=checkbox]', function (e) {
    // all checked checkboxes in #pricing
    var totamount = $('#totalamount').hide();
    var total = $('#pricing > [type=checkbox]:checked') 
                .toArray()                       //<= convert to array 
                .reduce( function (a, b) {       //<= calculate sum
                          return a + (+b.value); //<= + operator converts to Number
                         },0 );
    totamount.html( total.toFixed(2) ).fadeIn();
});

$('#addcbx').on('click', function (e) {
    var amount = $('#cbvalue').val();
    if (!amount || amount < 0.001) {
      return true;
    }
    var nwcbx = $('<input type="checkbox" value="' + amount + '" \/> '+ amount+ '<br>')
                  .insertBefore($('#total'));
});

body {
  margin: 2em;
  font: 0.8em/1em normal verdana, arial;
}

#total {
  width: 150px;
  border-top: 1px solid #ddd;
  padding-top: 5px;
}

#totalamount {
  font-weight: bold;
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pricing">
  <input type="checkbox" value=100.00 /> 100.00<br>
  <input type="checkbox" value=231.00 /> 231.00<br>
  <input type="checkbox" value=521.99 /> 521.99<br>
  <input type="checkbox" value=22.25 /> 22.25<br>
  <input type="checkbox" value=36.55 /> 36.55<br>
  <input type="checkbox" value=96.32 /> 96.32<br>
  <input type="checkbox" value=5.50 /> 5.50<br>
  <div id="total">total: <span id="totalamount">0</div>
</div>

<p>
  <input type="number" id="cbvalue" placeholder="amount" step="0.01" min="0.00" value="0.00"/>
  <button id="addcbx">add checkbox for amount</button>
</p>

added 2 characters in body

Source Link

edited Jan 9, 2015 at 11:36

KooiInc

577
2
8

The advantage for this approach is also that you can add checkboxes dynamically, which are included immediately in the calculations. The second handler in the snippet demonstrates that.

$('#pricing').on( 'click', '[type=checkbox]', function (e) {
        // all checked checkboxes in #pricing
        var total = $('#pricing > [type=checkbox]:checked') 
                     .toArray()                       //<= convert to array 
                     .reduce( function (a, b) {       //<= calculate sum
                               return a + (+b.value); //<= + operator converts to Number
                              },0 );
        $('#total').html( total == 0 ? 'total: 0' : 'total: ' + total.toFixed(2) );
});

$('#addcbx').on('click', function (e) {
    var amount = $('#cbvalue').val();
    if (!amount || amount == 0) {
      return true;
    }
    var nwcbx = $('<input type="checkbox" value="' + amount + '" \/> '+ amount+ '<br>')
                  .insertBefore($('#total'));
});

body {
  margin: 2em;
  font: 0.8em/1em normal verdana, arial;
}

#total {
  width: 150px;
  border-top: 1px solid #ddd;
  padding-top: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pricing">
  <input type="checkbox" value=100.00 /> 100.00<br>
  <input type="checkbox" value=231.00 /> 231.00<br>
  <input type="checkbox" value=521.99 /> 521.99<br>
  <input type="checkbox" value=22.25 /> 22.25<br>
  <input type="checkbox" value=36.55 /> 36.55<br>
  <input type="checkbox" value=96.32 /> 96.32<br>
  <input type="checkbox" value=5.50 /> 5.50<br>
  <div id="total">total: 0</div>
</div>

<p>
  <input type="number" id="cbvalue" placeholder="amount" step="0.01" min="0.00" value="0.00"/>
  <button id="addcbx">add checkbox for amount</button>
</p>

$('#pricing').on( 'click', '[type=checkbox]', function (e) {
        // all checked checkboxes in #pricing
        var total = $('#pricing > [type=checkbox]:checked') 
                     .toArray()                       //<= convert to array 
                     .reduce( function (a, b) {       //<= calculate sum
                               return a + (+b.value); //<= + operator converts to Number
                              },0 );
        $('#total').html( total == 0 ? 'total: 0' : 'total: ' + total.toFixed(2) );
});

body {
  margin: 2em;
  font: 0.8em/1em normal verdana, arial;
}

#total {
  width: 150px;
  border-top: 1px solid #ddd;
  padding-top: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pricing">
  <input type="checkbox" value=100.00 /> 100.00<br>
  <input type="checkbox" value=231.00 /> 231.00<br>
  <input type="checkbox" value=521.99 /> 521.99<br>
  <input type="checkbox" value=22.25 /> 22.25<br>
  <input type="checkbox" value=36.55 /> 36.55<br>
  <input type="checkbox" value=96.32 /> 96.32<br>
  <input type="checkbox" value=5.50 /> 5.50<br>
  <div id="total">total: 0</div>
</div>

The advantage for this approach is also that you can add checkboxes dynamically, which are included immediately in the calculations. The second handler in the snippet demonstrates that.

$('#pricing').on( 'click', '[type=checkbox]', function (e) {
    // all checked checkboxes in #pricing
    var total = $('#pricing > [type=checkbox]:checked') 
                .toArray()                       //<= convert to array 
                .reduce( function (a, b) {       //<= calculate sum
                          return a + (+b.value); //<= + operator converts to Number
                         },0 );
    $('#total').html( total == 0 ? 'total: 0' : 'total: ' + total.toFixed(2) );
});

$('#addcbx').on('click', function (e) {
    var amount = $('#cbvalue').val();
    if (!amount || amount == 0) {
      return true;
    }
    var nwcbx = $('<input type="checkbox" value="' + amount + '" \/> '+ amount+ '<br>')
                  .insertBefore($('#total'));
});

body {
  margin: 2em;
  font: 0.8em/1em normal verdana, arial;
}

#total {
  width: 150px;
  border-top: 1px solid #ddd;
  padding-top: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pricing">
  <input type="checkbox" value=100.00 /> 100.00<br>
  <input type="checkbox" value=231.00 /> 231.00<br>
  <input type="checkbox" value=521.99 /> 521.99<br>
  <input type="checkbox" value=22.25 /> 22.25<br>
  <input type="checkbox" value=36.55 /> 36.55<br>
  <input type="checkbox" value=96.32 /> 96.32<br>
  <input type="checkbox" value=5.50 /> 5.50<br>
  <div id="total">total: 0</div>
</div>

<p>
  <input type="number" id="cbvalue" placeholder="amount" step="0.01" min="0.00" value="0.00"/>
  <button id="addcbx">add checkbox for amount</button>
</p>

added 2 characters in body

Source Link

edited Jan 9, 2015 at 11:21

KooiInc

577
2
8

You can simplify and shorten code by using a container element for your checkboxes and just use one click handler on that (using jquery event delegation). Within the handler you can calculate the total for all checked checkboxes values. The snippet is a demo for it.

In it, the handler:

gets the collection of all checkedchecked checkboxes within the container
converts them to an array
uses the Array.reduce method to calculate the total
displays the calculated total within div#total

$('#pricing').on( 'click', '[type=checkbox]', function (e) {
        // all checked checkboxes in #pricing
        var total = $('#pricing > [type=checkbox]:checked') 
                     .toArray()                       //<= convert to array 
                     .reduce( function (a, b) {       //<= calculate sum
                               return a + (+b.value); //<= + operator converts to Number
                              },0 );
        $('#total').html( total == 0 ? 'total: 0' : 'total: ' + total.toFixed(2) );
});

body {
  margin: 2em;
  font: 0.8em/1em normal verdana, arial;
}

#total {
  width: 150px;
  border-top: 1px solid #ddd;
  padding-top: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pricing">
  <input type="checkbox" value=100.00 /> 100.00<br>
  <input type="checkbox" value=231.00 /> 231.00<br>
  <input type="checkbox" value=521.99 /> 521.99<br>
  <input type="checkbox" value=22.25 /> 22.25<br>
  <input type="checkbox" value=36.55 /> 36.55<br>
  <input type="checkbox" value=96.32 /> 96.32<br>
  <input type="checkbox" value=5.50 /> 5.50<br>
  <div id="total">total: 0</div>
</div>

You can simplify and shorten code by using a container element for your checkboxes and just use one click handler on that (using jquery event delegation). Within the handler you can calculate the total for all checked checkboxes values. The snippet is a demo for it.

In it, the handler:

gets the collection of all checked checkboxes within the container
converts them to an array
uses the Array.reduce method to calculate the total
displays the calculated total within div#total

$('#pricing').on( 'click', '[type=checkbox]', function (e) {
        // all checked checkboxes in #pricing
        var total = $('#pricing > [type=checkbox]:checked') 
                     .toArray()                       //<= convert to array 
                     .reduce( function (a, b) {       //<= calculate sum
                               return a + (+b.value); //<= + operator converts to Number
                              },0 );
        $('#total').html( total == 0 ? 'total: 0' : 'total: ' + total.toFixed(2) );
});

body {
  margin: 2em;
  font: 0.8em/1em normal verdana, arial;
}

#total {
  width: 150px;
  border-top: 1px solid #ddd;
  padding-top: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pricing">
  <input type="checkbox" value=100.00 /> 100.00<br>
  <input type="checkbox" value=231.00 /> 231.00<br>
  <input type="checkbox" value=521.99 /> 521.99<br>
  <input type="checkbox" value=22.25 /> 22.25<br>
  <input type="checkbox" value=36.55 /> 36.55<br>
  <input type="checkbox" value=96.32 /> 96.32<br>
  <input type="checkbox" value=5.50 /> 5.50<br>
  <div id="total">total: 0</div>
</div>

You can simplify and shorten code by using a container element for your checkboxes and just use one click handler on that (using jquery event delegation). Within the handler you can calculate the total for all checked checkboxes values. The snippet is a demo for it.

In it, the handler:

gets the collection of all checked checkboxes within the container
converts them to an array
uses the Array.reduce method to calculate the total
displays the calculated total within div#total

$('#pricing').on( 'click', '[type=checkbox]', function (e) {
        // all checked checkboxes in #pricing
        var total = $('#pricing > [type=checkbox]:checked') 
                     .toArray()                       //<= convert to array 
                     .reduce( function (a, b) {       //<= calculate sum
                               return a + (+b.value); //<= + operator converts to Number
                              },0 );
        $('#total').html( total == 0 ? 'total: 0' : 'total: ' + total.toFixed(2) );
});

body {
  margin: 2em;
  font: 0.8em/1em normal verdana, arial;
}

#total {
  width: 150px;
  border-top: 1px solid #ddd;
  padding-top: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pricing">
  <input type="checkbox" value=100.00 /> 100.00<br>
  <input type="checkbox" value=231.00 /> 231.00<br>
  <input type="checkbox" value=521.99 /> 521.99<br>
  <input type="checkbox" value=22.25 /> 22.25<br>
  <input type="checkbox" value=36.55 /> 36.55<br>
  <input type="checkbox" value=96.32 /> 96.32<br>
  <input type="checkbox" value=5.50 /> 5.50<br>
  <div id="total">total: 0</div>
</div>

added 236 characters in body

Source Link

edited Jan 9, 2015 at 10:36

KooiInc

577
2
8

Loading

added 236 characters in body

Source Link

edited Jan 9, 2015 at 10:29

KooiInc

577
2
8

Loading

Source Link

created Jan 9, 2015 at 10:21

KooiInc

577
2
8

Loading

Stack Exchange Network

Return to Answer