Onay kutusu etiketlerinden değerler ekle

Question

Web sayfamda etiketli 4 onay kutusu ve toplam etiket var. Etiketler, örn. 12 dolar, 100 dolar. Kullanıcı bir kutuyu işaretlediğinde, değeri etiketten almak ve toplam etikete koymak istiyorum. Daha sonra kullanıcı kutunun seçimini kaldırırsa, o zaman toplam değerden bu değeri çıkartın.

Değeri aldığım ve '$' sırayı kestikten sonra kalan dizeyi bir sayıya dönüştürdüğüm checkbox2() adında bir işlev ayarlamaya çalıştım. Ardından kutunun işaretli olup olmadığını kontrol edin, eğer öyleyse, sayı ekleyin. sonra dize geri dönüştürün ve innerHTML'yi ayarlayın. İşe yaramadı ve bunu yapmanın yolu olmadığından eminim.

Bunun için nasıl gitmeliyim?

<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 da doğru değildi. o onay kutuları ile ilişkili erişim değerlerine kolay böylece bir bakıma html ayar olmalı Temelde bu

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

deneyin. Her bir giriş onay kutusu için data-value = "0" ve totallbl ve değeri değerlerini not edin.

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 tamamlanmadan çalışan örnek ve kafa etiketinde jquery cdn ekleyin. Eğer kesin çıkış sonra

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

     } 
    }); 
});