Question

我在各自的标签内有一组复选框，并试图获取所选标签/复选框的值，添加它们的值并填充总和在下面的Div中。

总和将不断变化，具体取决于标签的选择和取消选择。

我已经到了可以在单击时获取每个选定标签的值的部分，将总和添加到其DIV中并显示出来。但是，这是我无法弄清楚的棘手部分，当选择一个选项后未选择时，如何从该总和中减去。

这是我编写的用于从数据库生成带标签的输入的功能。

function getLabTestListCheck($color){
        global $db;
        $getLabTestListCheck = $db->prepare("SELECT * from lab_tests WHERE enabled = true ORDER BY test_name ASC");
        $getLabTestListCheck->execute();
        $testType = '';
        if($getLabTestListCheck->rowCount() > 0){
            while($showLabTestListCheck = $getLabTestListCheck->fetch(PDO::FETCH_ASSOC)){
                $id = $showLabTestListCheck['id'];
                $test_name = $showLabTestListCheck['test_name'];
                $test_rate = $showLabTestListCheck['test_rate'];

                $testType .=  "<label id='testType_label' name='test_label_list' class='btn btn-secondary {$color} test_type' data-name='{$test_name}' style='border-radius:0;'>";
                $testType .= "<input type='checkbox' id='test_type_{$test_name}' name='test_name[]' value='{$id},{$test_name},{$test_rate}' data-price='{$test_rate}'autocomplete='off'>{$test_name}";
                $testType .= "</label>";
            }
        return $testType;
        }
    }

上面的代码将生成类似这样的标签

<div class="btn-group btn-group-toggle" style="flex-flow: row wrap;" data-toggle="buttons">
    <label id="testType_label_28" name="test_label_list" class="btn btn-secondary success test_type" data-name="A.S.O Titter">
        <input type="checkbox" id="test_type_28" name="test_name[]" value="28,A.S.O Titter,200.00" data-price="200.00">A.S.O Titter
    </label>
    <label id="testType_label_1" name="test_label_list" class="btn btn-secondary success test_type" data-name="Albumin">
        <input type="checkbox" id="test_type_1" name="test_name[]" value="1,Albumin,100.00" data-price="100.00">Albumin
    </label>
    <label id="testType_label_2" name="test_label_list" class="btn btn-secondary success test_type" data-name="ALP">
        <input type="checkbox" id="test_type_2" name="test_name[]" value="2,ALP,100.00" data-price="100.00">ALP
    </label>
    <label id="testType_label_6" name="test_label_list" class="btn btn-secondary success test_type" data-name="APTT">
        <input type="checkbox" id="test_type_6" name="test_name[]" value="6,APTT,200.00" data-price="200.00">APTT
    </label>
    <label id="testType_label_7" name="test_label_list" class="btn btn-secondary success test_type" data-name="B.S.R">
        <input type="checkbox" id="test_type_7" name="test_name[]" value="7,B.S.R,50.00" data-price="50.00">B.S.R
    </label>
    <label id="testType_label_20" name="test_label_list" class="btn btn-secondary success test_type" data-name="B.T+C.T">
        <input type="checkbox" id="test_type_20" name="test_name[]" value="20,B.T+C.T,100.00" data-price="100.00">B.T+C.T
    </label>
    <label id="testType_label_25" name="test_label_list" class="btn btn-secondary success test_type" data-name="Calcium">
        <input type="checkbox" id="test_type_25" name="test_name[]" value="25,Calcium,120.00" data-price="120.00">Calcium
    </label>
    <label id="testType_label_8" name="test_label_list" class="btn btn-secondary success test_type" data-name="CBC">
        <input type="checkbox" id="test_type_8" name="test_name[]" value="8,CBC,200.00" data-price="200.00">CBC
    </label>
</div>

下面是div，它将包含data-price属性内的值的（加/减通话）

<div class='priceDiv'></div>

我编写的jQuery如下，

    // Test Type fetch price from data attr and add to rate list
    var sum = [];
    $('.test_type').on('click', function(){

            var id = $(this).data("id");
            var val = $('#test_type_'+id).data("price");
            sum.push(val);

            var total=0;
            for(var i = 0; i < sum.length; i++) {
                total += sum[i] << 0;
            }
            $('#priceDiv').html(total);
    });

我想从总和中减去以后…“未选中” 复选框的值。现在，无论选择或不选择，单击任何标签都将不断添加到总和中

请帮助

Answer 1

没关系，我自己弄清楚了。虽然它可能不是最好的解决方案，但它仍然有效，因此我认为应该可以。

只需在jQuery中添加一行代码即可。

// Test Type fetch price from data attr and add to rate list
    var sum = [];
    $('.test_type').on('change', function(){

            var id = $(this).data("id");

            /* Added this if statement to manipulate on class of selected label */
            if($(this).hasClass('active')){
                var val = '-'+$('#test_type_'+id).data("price");
            } else {
                val = $('#test_type_'+id).data("price");
            }
            /* -------------------------------- */

            sum.push(val);

            var total=0;
            for(var i = 0; i < sum.length; i++) {
                total += sum[i] << 0;
            }
            $('#priceDiv').html(total);
    });

获取选定/未选定复选框值的总和并填充div

1 个答案: