如何更改选择的成本计算器为复选框，而无需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>

Answer 1

您可以使用"单选"按钮或限制复选框以仅选择一个选项。尝试以下代码，希望这能达到您的期望。

$(function () {
    $("input:checkbox").on('click', function () {
        var $box = $(this);
        if ($box.is(":checked")) {
            var group = "input:checkbox[name='" + $box.attr("name") + "']";
            $(group).prop("checked", false);
            $box.prop("checked", true);
        } else {
            $box.prop("checked", false);
        }
        calculate();
    });
    function calculate() {
        var price = 0;
        $.each($("input:checkbox"), function () {
            if ($(this).is(":checked")) {
                price += +($(this).val());
            }
        });
        $('#price').html(price.toFixed(2));
    }
})

在这里，我正在使用复选框组，并限制它们从组中仅选择一个项目。

<form id="form1" method="post" action="">
    <div>
        <h3>Size</h3>
        <label>
            <input type="checkbox" class="radio" value="1" name="cpu[]"/>A5</label>
        <label>
            <input type="checkbox" class="radio" value="2" name="cpu[]"/>A4</label>
        <label>
            <input type="checkbox" class="radio" value="3" name="cpu[]"/>A3</label>
        <label>
            <input type="checkbox" class="radio" value="4" name="cpu[]"/>A2</label>
        <label>
            <input type="checkbox" class="radio" value="5" name="cpu[]"/>A1</label>
        <label>
            <input type="checkbox" class="radio" value="6" name="cpu[]"/>A0</label>
    </div>
    <div>
        <h3>Type</h3>
        <label>
            <input type="checkbox" class="radio" value="0" name="gpu[]"/>1</label>
        <label>
            <input type="checkbox" class="radio" value="1" name="gpu[]"/>2</label>
        <label>
            <input type="checkbox" class="radio" value="2" name="gpu[]"/>3</label>
        <label>
            <input type="checkbox" class="radio" value="3" name="gpu[]"/>4</label>
    </div>
    <div>
        <h3>Kind</h3>
        <label>
            <input type="checkbox" class="radio" value="1" name="hdd[]"/>Black</label>
        <label>
            <input type="checkbox" class="radio" value="2" name="hdd[]"/>Color</label>
    </div>
    <div>
        <h3>covers</h3>
        <label>
            <input type="checkbox" class="radio" value="0" name="RAM[]"/>non</label>
        <label>
            <input type="checkbox" class="radio" value="1" name="RAM[]"/>stapler</label>
        <label>
            <input type="checkbox" class="radio" value="2" name="RAM[]"/>book</label>
        <label>
            <input type="checkbox" class="radio" value="3" name="RAM[]"/>rool</label>
    </div>

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