Question

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

我到目前为止：

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

这应该做你想要的事情

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

3 个答案: