Question

我的网页上有4个带标签和总标签的复选框。标签是价格，例如12美元，100美元。当用户选中一个框时，我想从标签中取出值并将其放入总标签中。然后，如果用户取消选中该框，则从总标签中减去该值。

我试图设置一个名为checkbox2（）的函数，我在其中获取了值并剥离了＆＃39; $＆＃39;然后把剩下的字符串变成一个数字。然后检查框是否已选中，如果是，则添加数字。然后转换回字符串并设置innerHTML。没有工作，我肯定不是这样做的方法。

我应该怎么做？

<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

您的HTML也不正确。试试这个

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

基本上，您应该以某种方式设置html，以便轻松访问与复选框相关的值。请注意为totalallbl data-value =＆＃34; 0＆＃34; ，为每个输入复选框分配值。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 3

HEllo亲爱的完成运行示例，请在头标记中添加jquery cdn。如果你没有得到确切的输出，那么告诉我..

    <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

（文档）$。就绪（函数（）{

    $('.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;

        }
    });
});

添加复选框标签

4 个答案: