在複選框值上運行函數？

我一直在嘗試根據用戶在頁面上檢查多少個複選框來更新結果。在複選框值上運行函數？

如果用戶檢查了5個或更多，那麼它應該會淡出2個div。

如果用戶選中了10個或更多，它應該會淡出另外兩個div。

如果用戶選擇10或更多，它應該淡化另一組。

我可以得到第一個函數運行，但我相信自第一個if語句完成後，它不會查找更新/值更改？其他人也不會退色到100％不透明度。

$('input:checkbox').change(function() { 
    var boxChecked = $('input:checkbox:checked').length; 
    if (boxChecked > 5) { 
     $('.div-1, .div-2').fadeTo(500, 0.4) 
    } 
    else if (boxChecked > 10) { 
     $('.div-1, .div-3').fadeTo(500, 0.4) 
    } 
    else if (boxChecked > 11) { 
     $('.div-1, .div-2').fadeTo(500, 0.4) 
    } 
});

來源

2014-08-27 Miura-shi

div是否應該累計褪色，還是隻爲滿足最大條件？ – drneel 2014-08-27 19:12:32

第二個和第三個'fadeTo'語句中的'div-3'和'div-2'分別都缺少'.'類選擇器。這是打算？ – Stryner 2014-08-27 19:12:45

加上你想爲所有ifs使用'boxChecked> = 5'風格，因爲你說過「如果用戶檢查了5個或更多」。 'boxChecked> 5'表示除非用戶檢查了6個或更多的框，否則代碼將不會運行。 – ps2goat 2014-08-27 19:14:10

您需要爲if/else語句條件設置範圍，或者僅使用if語句使代碼正常工作。

例如，如果長度> 5，則將採取第一個分支。

但是，您的第二個分支檢查長度是否大於10，但由於第一個條件也是對的，因此永遠不會達到此聲明。

你可以嘗試這樣的事情：

$('input:checkbox').change(function() { 
    var boxChecked = $('input:checkbox:checked').length; 
    if (boxChecked === 2) { 
     $('.div-1, .div-2').fadeTo(500, 0.4); 
    } 
    else if (boxChecked > 3 && boxChecked <5) { 
     $('.div-1, .div-3').fadeTo(500, 0.4); 
    } 
    else if (boxChecked > 4) { 
     $('.div-1, .div-2').fadeTo(500, 0.4); 
    } 
    else { 
     $('.div-1, .div-2, .div-3').fadeTo(500,1); 
    } 
});

編輯：添加了的jsfiddle和修正了一個錯誤 - 添加一個else當不滿足條件重置的div。 JSFiddle：http://jsfiddle.net/148cL5rc/1/

來源

2014-08-27 19:28:30 Will

謝謝你的時間。這幫了我很多。我現在明白如何設置這些。 – 2014-08-27 20:25:09

不客氣，很高興我能幫上忙。 – Will 2014-08-27 21:01:46

顛倒你的if語句。當你高於5時，> 5總是會是真的，所以你想要開始檢查更高的數字，並努力降低數字。

$('input:checkbox').change(function() { 
    var boxChecked = $('input:checkbox:checked').length; 
    if (boxChecked > 11) { 
     $('.div-1, .div-2').fadeTo(500, 0.4) 
    } else if (boxChecked > 10) { 
     $('.div-1, .div-3').fadeTo(500, 0.4) 
    } else if (boxChecked > 5) { 
     $('.div-1, .div-2').fadeTo(500, 0.4) 
    } 
});

來源

2014-08-27 19:27:10 drneel

在複選框值上運行函數？

回答

相關問題