突出顯示「全選」的顏色變化

Question

我有這個JavaScript來使用下面的表格更改桌子上的高亮顏色。默認顏色是綠色的，我可以通過點擊顏色按鈕來選擇我想要的顏色。此代碼僅適用於輸入爲class="selector"。我希望這個函數也可以用於輸入class="all"，所以我複製了代碼並在第二個副本中將$('.selector')更改爲=>$('.all')。但我無法得到我想要的結果，代碼不適用於class="all"選擇。我希望顏色變化也可以用於「全選」。任何想法如何實現？請。謝謝。

小提琴：https://jsfiddle.net/hfh6smf8/

的Javascript：

$(function() { 
    $('.selector').on('click', function(e) { 
    var checked = this.name; 
    var selectedColor = ''; 

    if (this.checked) { 
     selectedColor = $('#nextColor').val(); 

     } 
    $('td').filter(function() { 
     return this.textContent == checked; 
    }).css('background-color', selectedColor); 
    }); 
}); 

HTML表單：

<form id="form1" name="form1" method="post" action=""> 
    <label><input type="checkbox" name="SelectAll" class="all" />SelectAll</label> 
    <label><input type="checkbox" name="M" class="selector" />M</label> 
    <label><input type="checkbox" name="n" class="selector" />n</label> 
    <label><input type="checkbox" name="nn" class="selector" />nn</label> 
    <label><input type="checkbox" name="R" class="selector" />R</label> 
</form>  

Answer 1

https://jsfiddle.net/hfh6smf8/7/

這是你努力實現什麼？如果是的話，如果你把所有相關的html 以及你想檢查所有的複選框會很容易嗎？

$('.all').on('click', function(e) { 
    var checked = this.name; 
    var selectedColor = ''; 

    if (this.checked) { 
     selectedColor = $('#nextColor').val(); 

     } 
    $('td').css('background-color', selectedColor); 
    }); 

這是回答你一個問題，你需要知道如何與selector玩，它會幫助你很多，因爲這只是樣品，可以達到你想要做什麼，你可以做更具體的選擇

https://jsfiddle.net/5z7zbaq2/2/ 變化

$('td').css('background-color', selectedColor); 

到

$('#form1').find('td').css('background-color', selectedColor);