取消選中/選中復選框時，javascript在div中添加/刪除文本

Question

我正在嘗試學習Javascript的魔力。 我要在此處執行的操作是在未選中 / 選中 復選框時在div中添加 / 刪除文本。

這是我嘗試做的購物車：

function addCartItem(checkboxElement,cartElement,cartItemElement){

    var s = "";
    if(checkboxElement.checked == true){
        s = document.getElementById(cartItemElement).innerHTML += checkboxValue;
        updatePrice();
    }
    else{
        s = document.getElementById(cartItemElement).innerHTML = checkboxValue;
        s = s.replace(s,"");
        updatePrice();
   }
}

我無法使其正常工作，它不會從未選中的復選框中刪除該值。

更新我有此復選框調用函數，如下所示：

<input type="checkbox" onclick="addCartItem(this,'cartElement','cartItemElement');" value="StarBreeze: TWD Demo |1337">

Answer 1

我會嘗試這樣的

function addCartItem(checkboxElement,cartElement,cartItemElement){

    var s = document.getElementById(cartItemElement).innerHTML;
    if(checkboxElement.checked == true)
    {
        s += checkboxValue;
    }
    else
   {
        s = s.replace(checkboxValue,"");
   }
   document.getElementById(cartItemElement).innerHTML = s;
   updatePrice();
}

但我不確定復選框的值來自何處以及它的外觀。

Answer 2

在其他方式上，您可以使用jquery！ jQuery會讓它太簡單了！ 試試！ :)

  $(function () { $("#yourCheckBox").click(function () { if ($(this).is(":checked")) { $("#showHideDiv").show(); } else { $("#showHideDiv").hide(); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <label for="checkbox"> <input type="checkbox" id="yourCheckBox" /> Your Checkbox! </label> <hr /> <div id="showHideDiv" style="display: none"> I am here! </div>