1

My problem is that I have a table with multiple checkboxes and few buttons. Each checkbox have some value (number). What I'm trying to achieve is to could manipulate values in all checked checkboxes using buttons. When I click on the button than values in all selected checkboxes should increase/decrease (depend from clicked button).

I have so far this:

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

I don't know how to update old values with those new (increased).

4

3 回答 3

1

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

$("#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/

于 2013-05-05T18:21:31.537 回答
0

这是我想出的，希望对您有所帮助：

$("#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/

于 2013-05-05T18:13:41.250 回答
0

你不应该需要第一个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);
    }
  });
});

这应该做你所追求的

于 2013-05-05T18:15:01.523 回答