チェックボックスのラベルから値を追加

Question

私は自分のウェブページにラベルと合計ラベルを持つ4つのチェックボックスを持っています。ラベルは価格です。 $ 12、$ 100。ユーザーがボックスにチェックを入れると、ラベルから値を取り出し、それを合計ラベルに入れたいと思う。次に、ユーザーがボックスの選択を解除した場合は、その値を合計ラベルから差し引きます。

私は値をとり、 '$'を取り除いて残りの文字列を数値に変換したcheckbox2（）という関数を設定しようとしました。ボックスがチェックされている場合はチェックし、そうであれば番号を追加します。文字列に変換して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も正しくありませんでした。それはチェックボックスに関連付けられているアクセス値に簡単だように、あなたが方法で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

を試してみてください。合計入力チェックボックスにはのデータ値= "0"との値が割り当てられています。

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

こんにちは親愛なる、それは例を実行完了し、headタグで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

$（ドキュメント）.ready（関数（）{

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

     } 
    }); 
});