javascript - 自定义复选框切换属性值

Question

我正在尝试构建一个自定义复选框，根据是否选中来添加或减去一个值。即:所有选中的框都被求和。

$("div[active=1]").on("click",function(){
    var itemPrice = $(this).attr("itemprice");
    sum -= Number(itemPrice);
    $("#current_price").html(sum);
    $(this).attr("active","0");
});

$("div[active=0]").on("click",function(){
    var itemPrice = $(this).attr("itemprice");
    sum += Number(itemPrice);
    $("#current_price").html(sum);
    $(this).attr("active","1");
});

我的问题是将框状态更改为“已选中”或“未选中”。我正在使用 $(this).attr("checked",1); 更改单击后的状态。

这是我到目前为止所做的，如您所见，单击 100 框(例如)只会继续添加 100，而不是加/减/加/减......

http://jsfiddle.net/L76xzbLj/

Answer 1

您的点击处理程序不适用于动态更改的对象，请尝试以下操作:

$("body").on("click", "div[active=1]", function(){
    var itemPrice = $(this).attr("itemprice");
    sum -= Number(itemPrice);
    $("#current_price").html(sum);
    $(this).attr("active","0");
});

$("body").on("click", "div[active=0]", function(){
    var itemPrice = $(this).attr("itemprice");
    sum += Number(itemPrice);
    $("#current_price").html(sum);
    $(this).attr("active","1");
});

更新的 fiddle :http://jsfiddle.net/L76xzbLj/7/