从复选框标签添加值

Question

I have 4 checkboxes with labels and a total label in my webpage. The labels are the price eg $12, $100. When the user checks a box I want to take the value from the label and put it in the total label. Then if the user deselect the box, then subtract that value from the total label.

I have tried to set a function called checkbox2() where I took the value and stripped the '$' then turned the remaining string into a number. Then checked if the box was checked, if so, then add number. then convert back to string and set the innerHTML. Did not work and I am sure not the way to do this.

How should I go about this?

<div class="cbwrap">
    <label for="check2" name="label2" id="label2">
        <input type="checkbox" class="cb" id="check2" onclick="checkBox2()"/> $125
    </label>
</div>
<div class="cbwrap">
    <label>
        <input type="checkbox" class="cb" id="check3" onclick="checkBox2()"/> $100
    </label>
</div>
<div class="cbwrap">
    <label>
        <input type="checkbox" class="cb" onclick="checkBox2()" /> $75 
    </label>
</div>
<div class ="cbwrap">
    <label>
        <input type="checkbox" class="cb" onclick="checkBox2()" /> $50 
    </label>
</div>
<div class ="pwrap">
    <p class="cat1"><b><u>Total</u></b></p>
</div>
<div class="cbwrap">
    <label for="total" name="totallbl" id="totallbl"><u><b>$0</b></u></label>
</div>
<div> 
    <label for="total" name="agreedLBL" id="agreedLBL">0</label>
</div>

JS:

var k = document.getElementById("totallbl").innerHTML;
if (document.getElementById("check1").checked) {
    x = "150";
} else {
    x = "0";
    var res = k + x;
    document.getElementById("totallbl").innerHTML = res;
}

Answer 1

your html was also not correct. Try this

 function checkBox2(checkbox) { if (checkbox.checked) { var value = checkbox.parentNode.textContent.match(/\\s*\\d+(?:\\.\\d{2})?/)[0]; var totalValue = document.getElementById('totallbl').querySelector('b').innerHTML.match(/\\s*\\d+(?:\\.\\d{2})?/)[0]; var newTotalValue = parseFloat(value) + parseFloat(totalValue); document.getElementById('totallbl').querySelector('b').innerHTML = "$" + newTotalValue; document.getElementById('agreedLBL').innerText = newTotalValue; } else { var value = checkbox.parentNode.textContent.match(/\\s*\\d+(?:\\.\\d{2})?/)[0]; var totalValue = document.getElementById('totallbl').querySelector('b').innerHTML.match(/\\s*\\d+(?:\\.\\d{2})?/)[0]; var newTotalValue = parseFloat(totalValue) - parseFloat(value); document.getElementById('totallbl').querySelector('b').innerHTML = "$" + newTotalValue; document.getElementById('agreedLBL').innerText = newTotalValue; } } 

 <div class="cbwrap"> <label for="check2" name="label2" id="label2"> <input type="checkbox" class="cb" id="check2" onclick="checkBox2(this)" /> $125</label> </div> <div class="cbwrap"> <label> <input type="checkbox" class="cb" id="check3" onclick="checkBox2(this)" /> $100</label> </div> <div class="cbwrap"> <label> <input type="checkbox" class="cb" onclick="checkBox2(this)" /> $75</label> </div> <div class="cbwrap"> <label> <input type="checkbox" class="cb" onclick="checkBox2(this)" /> $50</label> </div> <div class="pwrap"> <p class="cat1"><b><u>Total</u></b></p> </div> <div class="cbwrap"> <label for="total" name="totallbl" id="totallbl"><u><b>$0</b></u></label> </div> <div> <label for="total" name="agreedLBL" id="agreedLBL">0</label> </div> 

Answer 2

Basically, you should be setting html in a way so that it's easy to access values associated with checkboxes. Please note data-value="0" on totallbl and value assigned for each input checkbox.

 function checkBox2(obj) { var k = parseInt(document.getElementById("totallbl").dataset.value); if (obj.checked) { k += parseInt(obj.value); } else { k -= parseInt(obj.value); } document.getElementById("agreedLBL").innerHTML = k; document.getElementById("totallbl").dataset.value = k; document.getElementById("totallbl").innerHTML = '$' + k; } 

 <div class="cbwrap"><label for="check1" name="label2" id="label2"><input type="checkbox" class="cb" id="check1" onclick="checkBox2(this);" value="150" /> $150</label></div> <div class="cbwrap"><label for="check2" name="label2" id="label2"><input type="checkbox" class="cb" id="check2" onclick="checkBox2(this);" value="125" /> $125</label></div> <div class="cbwrap"><label><input type="checkbox" class="cb" id="check3" onclick="checkBox2(this);" value="100" /> $100</label></div> <div class="cbwrap"><label><input type="checkbox" class="cb" onclick="checkBox2(this);" value="75" /> $75</label></div> <div class="cbwrap"><label><input type="checkbox" class="cb" onclick="checkBox2(this);" value="50" /> $50</label></div> <div class="pwrap"><p class="cat1"><b><u>Total</u></b></p></div> <div class="cbwrap"><label for="total" name="totallbl" id="totallbl" data-value="0" style="font-weight:bold;text-decoration:underline">$0</label></div> <div> <label for="total" name="agreedLBL" id="agreedLBL">0</label></div> 

Answer 3

HEllo Dear it complete running example and please add jquery cdn in head tag. if you not getting exact output then tell me..

    <body>
        <div class="cbwrap">
            <label for="check2" name="label2" id="label2">
                <input type="checkbox" class="cb" id="check2" onclick="checkBox2(this)" />
                $125</label>
        </div>
        <div class="cbwrap">
            <label>
                <input type="checkbox" class="cb" id="check3" onclick="checkBox2(this)" />
                $100</label>
        </div>
        <div class="cbwrap">
            <label>
                <input type="checkbox" class="cb" onclick="checkBox2(this)" />
                $75</label>
        </div>

        <div class="cbwrap">
            <label>
                <input type="checkbox" class="cb" onclick="checkBox2(this)" />
                $50</label>
        </div>

        <div class="pwrap">
            <p class="cat1">
                <b><u>Total</u></b>
            </p>
        </div>
        <div class="cbwrap">
            <label for="total" name="totallbl" id="totallbl"><u><b>$0</b></u></label>
        </div>
        <div>
            <label for="total" name="agreedLBL" id="agreedLBL">0</label>
        </div>
        <script>
            function checkBox2(tempCheckBOx) {
                var tempLenght = $(".cbwrap label input[type='checkbox']").length;
                var tempTotal = 0;
                for (var i = 0; i < tempLenght; i++) {
                    if ($(".cbwrap label input[type='checkbox']").eq(i).prop('checked') == true) {
                        var tempStore = $(".cbwrap label").eq(i).text();
                        var tempVal = parseInt(tempStore.trim().substr(1, (tempStore.length + 1)));
                        tempTotal += tempVal;
                    }
                }
               $("#agreedLBL").text("$"+tempTotal);
            }
        </script>
    </body> 

Answer 4

$(document).ready(function(){

    $('.cb').click(function(){

        var totalvaluestored =  document.getElementById('totallbl').innerText.replace(/\$/g, '');
        var value = this.value;
        if(totalvaluestored === "0"){

            document.getElementById('totallbl').innerHTML = '$'+value;
            this.value = "";
        }
        else if(totalvaluestored !== "0" && value !== "")
        {

            value = parseInt(totalvaluestored) + parseInt(value);
            document.getElementById('totallbl').innerHTML = '$ '+value;
            this.value = "";
        }
        else{

            var value = this.closest('label').innerText;
            value = value.replace(/\$/g, '');
            this.value = value;
            value = parseInt(totalvaluestored) - parseInt(value);
            document.getElementById('totallbl').innerHTML = '$ '+value;

        }
    });
});