Updating Cart Subtotal When a Checkbox is Ticked - Supply Theme

[hogg-it-zgev]

I'm trying to implement a checkbox on the cart page that adds a 1% fee to the subtotal when ticked to cover an optional Shipping Protection we're implementing (to be handled by us). I can get it working in a superficial way, but it doesn't actually do anything:

I more or less used the code from the Terms & Conditions Guide with some changes. Right now I have it set to output the proposed price for experimenting with the cart.total_price object. Here's the code I have in the cart.liquid for reference:

<p style="float: none; text-align: right; clear: both; margin: 10px 0;">
          <input style="float:none; vertical-align: middle;" type="checkbox" id="agree" />
          <label style="display:inline; float:none" for="agree">
            Shipment Protection {{ cart.total_price | times: 1.01 }}
          </label>
</p>

Now I know I need more than just this small bit of code to make this work. The problem is that my coding experience is limited to HTML/CSS with a very light amount of javascript. I'm having difficulty wrapping my head around the documentation and how I can get this to work or if it's even possible to change the cart's subtotal like this in the first place.

At its simplest, I need to know how to check when the checkbox is ticked and, if it is, how to both create the newly updated subtotal and push it to the cart to be the new subtotal.

I also really want to know why the times math filter is outputting that result. The decimal should be to the left 2 spots. That result is just weird.

Some insight into the distinction between the cart.liquid and ajax-cart-template.liquid files would also be appreciated. I'm wondering if I've been looking in the wrong places.