当取消选中/勾选复选框时,javascript在div中添加/删除文字

时间:2016-03-02 17:03:14

标签: javascript html checkbox

我正在努力学习 Javascript 的神奇之处。 我在这里尝试做的是当复选框 未选中 / 添加 / 删除文本>检查

这是我试图做一些购物车:

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

2 个答案:

答案 0 :(得分:2)

我会尝试这样的事情

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

但我不确定复选框值的来源以及它的外观。

答案 1 :(得分:0)

在其他方面你可以使用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>