如何在没有html的情况下将选择成本计算器更改为复选框

Question

我正在尝试将我当前的代码从选择选项更改为复选框选项或类似的东西，我只能从每一行中选择一件事而不更改最终结果，该结果计算来自每个选择和最后呈现总数

$(function () {

    var checkbox = $('#form1 :input').change(calculate)

    $("#form1 option").text(function(i,t){

        if (this.value!=="0")

            return t + " - $" + this.value

    })

    function calculate() {

        var price = 0;

        checkbox.each(function () {

            price += +$(this).val();

        })

        $('#price').html(price.toFixed(2));

    }

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="form1" method="post" action="">

    <p>

        <select class="form-control" name="CPU" id="CPU">

            <option value="0" selected>size</option>

            <option value="1">A5</option>

            <option value="2">A4</option>

            <option value="3">A3</option>

            <option value="4">A2</option>

            <option value="5">A1</option>

            <option value="6">A0</option>

        </select>

    </p>

    <p>

        <select class="form-control" name="GPU" id="GPU">

            <option value="0">type</option>

            <option value="0">1</option>

            <option value="1">2</option>

            <option value="2">3</option>

            <option value="3">4</option>

            

        </select>

    </p>

    <p>

        <select class="form-control" name="HDD" id="HDD">

            <option value="0">kind

                <option value="1">black</option>

                <option value="2">color</option>

               

        </select>

    </p>

    <p>

        <select class="form-control" name="RAM" id="RAM">

            <option value="0">covers</option>

            <option value="0">non</option>

            <option value="1">stapler</option>

            <option value="3">book</option>

            <option value="2">rool</option>

        </select>

    </p>

    

   

</form>Price: <u id="price"></u>