jQuery - 更新所有选中复选框中的值

Question

我的问题是我的表格有多个复选框和几个按钮。每个复选框都有一些值（数字）。我想要实现的是可以使用按钮操作所有选中复选框中的值。当我点击按钮时，所有选定复选框中的值都应该增加/减少（取决于点击的按钮）。

到目前为止，我有这个：

http://jsfiddle.net/5Et7g

$("input:checkbox").change(function () {
    $("input:checkbox").each(function () {
        if ($(this).is(":checked")) {
            var count = 0,
                newVal = parseInt($(this).val());

            $("#increase").click(function () {
                for (i = 0; i < 1; i++) {
                    count += 1;
                    if (newVal >= 90) {
                        newVal = 100;
                        $("#increase").prop('disabled', true);
                    } else {
                        newVal += 10;
                        $("#increase").prop('disabled', false);
                    }
                    console.log(newVal)
                }
            });
        }
    });
});

我不知道如何用那些新的（增加的）更新旧值。

Answer 1

对于增加和减少值，您可以使用 jQuery val 方法的回调函数。

$("#increase, #decrease").click(function() {
    var num = this.id === 'increase' ? 10 : -10; 
    $('input[type=checkbox]').val(function(_, value){
        return +value + num;
    });
});

http://jsfiddle.net/NQaqr/

关于禁用按钮：由于所有元素都有 1 个增加/减少按钮，除非每个复选框都有 1 个按钮，否则无法正确禁用按钮。例如，一个新值是 88，另一个是 100，我不确定在哪种情况下应该禁用/重新启用按钮。

更新：如果你只想增加/减少选中复选框的值，你可以使用:checked选择器：

$("#increase, #decrease").click(function () {
    var num = this.id === 'increase' ? 10 : -10;
    $('input[type=checkbox]:checked').val(function (i, value) {
        var newVal = +value + num;
        if (newVal > 100) newVal = 100;
        else if (newVal < 0) newVal = 0;

        return newVal;
    });
});

http://jsfiddle.net/gRUrH/

Answer 2

以下是我的想法，希望对您有所帮助：

$("#increase").click(function() {
    $("input[type='checkbox']").each(function() {
        if (this.checked) {
            var newVal = parseInt(this.value); 
            if (this.value >= 90) {
                newVal = 100;
                $("#increase").prop('disabled', true);
            } else {
                //do other stuff
                newVal += 10;
                $("#increase").prop('disabled', false); 
            }
            console.log(newVal);
        }
    });
});

小提琴：http://jsfiddle.net/5Et7g/2/

Answer 3

您不需要第一个 change 事件。每当您实际更改其中一个复选框的值时，这将运行。您想要的是将事件绑定到按钮的单击操作。所以你想要这样的东西：

$("#increase").click(function() {
  $("input[type=checkbox]:checked").each(function(idx, input) {
    var val = $(this).val();
    if (val >= 90) {
      val = 100;
      $("#increase").prop('disabled', true);
    } else {
      val += 10;
      $("#increase").prop('disabled', false);
    }
  });
});

这应该做你所追求的