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

這應該做你後