如果所有複選框都選中，更改行顏色？

這個主題已被詳細介紹了只有一個tickbox - 我的問題是我需要突出顯示錶格行，如果沒有勾選紅色或白色的顏色是至少有一個打勾。因此，如果沒有勾選，則突出顯示紅色，但如果至少勾選了一個，則突出顯示白色。我有這樣的代碼：如果所有複選框都選中，更改行顏色？

$("input:checkbox").live("change", function (event) { 
    $("tr checkbox").each(function() { 
     if ($(this).attr('checked')) { 
      $(this).closest('tr').addClass('white'); 
     } else { 
      $(this).closest('tr').removeClass('white'); 
     } 
    }); 
});

的HTML基本上是一個錶行有兩個數據和7個tickboxes - 如果沒有我們的勾選，然後突出顯示紅色，但如果至少1被選中，然後突出顯示爲白色。

在此先感謝。

編輯：

我發現，因爲我是從.live交換（）來。對（）和我tickboxes正在動態加載。我只好功能結合到一個非動態元素。這是我最終使用的代碼：

$("#emaillistbox").on("change","input:checkbox", function (event) { 
var $tr = $(this).closest("tr"); 
if($tr.find("input:checked").length > 0) 
{ 
    $tr.removeClass('red').addClass('white'); 
}else { 
    $tr.removeClass('white').addClass('red'); 
} 
});

emaillistbox是在我的動態加載內容的div名稱。

來源

2013-06-12 Joe Keene

幽州你想添加的，如果所有的類打勾編輯，如果只有1被勾選。你能否準確地澄清這些案件中的哪一個是正確的。 –

你可以做這樣的事情：

$("input:checkbox").on("change", function (event) { 
    var $tr = $(this).closest("tr"); 
    if($tr.find("input:checked").length > 0) 
    { 
     $tr.removeClass('red').addClass('white'); 
    }else { 
     $tr.removeClass('white').addClass('red'); 
    } 
});

See this working demo

更新

，使其與動態內容使用事件委派工作：

$(document).on("input:checkbox", "change", function (event) { });

Working demo

來源

2013-06-12 10:13:27 letiagoalves

這很好，我將如何使它適用於動態內容？即如果那些勾選框是通過ajax加載的？ –

@ ch3my看到更新後的安卓 – letiagoalves

感謝您的幫助，我通過將函數綁定到最終的非動態div來解決問題，但我也看到了您的方法。 –

嘗試使用標誌變量做this.and .live()被deprecated.try使用。對（）

$(document).on("change","input:checkbox", function (event) { 
    var flag = true; 
    $("tr checkbox").each(function() { 
     if (!$(this).attr('checked')) 
      flag = false; 

    }); 

    if(flag == true) 
     $(this).closest('tr').addClass('white'); 
    else 
      $(this).closest('tr').removeClass('white'); 

});

來源

2013-06-12 10:05:01 PSR

如果只檢查最後一個複選框，則標記將爲true，並將其初始化爲true，然後僅在未選中某個複選框時進行控制。 – jbrtrnd

@JBRTRND謝謝我更新我的代碼 – PSR

謝謝 - 如果我使用.on（），它是相同的功能嗎？除了將.live（）更改爲.on（）課程之外。 –

試試這個：

$("input[type=checkbox]").live("change", function (event) { 
    if ($(this).closest('tr').find('input[type=checkbox]:checked').length > 0) { 
    $(this).closest('tr').addClass('white'); 
    } else { 
    $(this).closest('tr').removeClass('white'); 
    } 
}

來源

2013-06-12 10:08:55 LukLed

雖然它被OP使用，但實時功能已被棄用 –

@Bartdude：這個解決方案肯定適用於ch3my 。使用'on'並不需要，因爲它不是很久以前推出的。 – LukLed

注意，如果選中1複選框，則OP會在該類中添加，如果選中所有複選框，則OP希望它發生。 –

我建議你做這樣：

$("input[type='checkbox']").on("change", function (event) { 
    $("tr input[type='checkbox']").each(function() { 
     if ($("input[type='checkbox']:checked").length >= $("input[type='checkbox']").length) { 
      $(this).closest('tr').addClass('white'); 
     } else { 
      $(this).closest('tr').removeClass('white'); 
     } 
    }); 
});

試着檢查的長度如果該值等於複選框長度的長度，則僅將css類應用於父項tr。

來源

2013-06-12 10:08:59 Jai

首先你可以檢查，看看是否有行中的任意選中複選框，刪除each環，其次，你應該做的tr相對於點擊複選框，最後，使用on代替live，因爲它的過時。試試這個：

$("input:checkbox").on('change', function (event) { 
    var $tr = $(this).closest('tr'); 
    if ($(':checkbox', $tr).not(':checked').length) { 
     // not all checked 
     $tr.removeClass('white'); 
    } 
    else { 
     // all checked in row 
     $tr.addClass('white'); 
    } 
});

Example fiddle

來源

2013-06-12 10:10:12

也許可以使用'：not（）'函數來替代選中複選框的比較數和複選框的總數。只要檢查複選框未檢查的長度是否大於0. – jbrtrnd

@JBRTRND好點，這是一個更優雅的方法，修改 - 謝謝。 –

@RoryMcCrossan。on（）不工作我認爲是因爲我的ajax調用 - 這是在tickbox窗體中加載的東西。我究竟做錯了什麼？ jquery函數在同一頁面上工作，但不在同一頁面上的任何內容上工作。 –

你應該使用一些布爾標誌來控制狀態

$("input:checkbox").on("change", function (event) { 
    var some = false; 
    var all = true; 
    var none = true; 
    $("tr checkbox").each(function() { 
     if ($(this).attr('checked')) { 
      some = true; 
      none = false; 
     } else { 
      all = false; 
     } 
    }); 
    var row = $(this).closest('tr'); 
    row.removeClass('green').removeClass('red').removeClass('white') 
    if (all) 
     row.addClass('green') 
    elseif (none) 
     row.addClass('red') 
    elseif (some) 
     row.addClass('white') 
});

希望這有助於

來源

2013-06-12 10:10:46 Edorka

如果所有複選框都選中，更改行顏色？

回答

相關問題