javascript - "Select all"的高亮颜色变化

Question

我有这个 JavaScript 可以使用下面的表单更改表格上的突出显示颜色。默认颜色是绿色，我可以通过点击颜色按钮来选择我想要的颜色。此代码仅适用于带有 class="selector" 的输入。我希望此函数也适用于 class="all" 的输入，所以我复制了代码并将 $('.selector') 更改为 => $('.all') 在第二个副本中。但我得不到我想要的结果，该代码不适用于 class="all" 选择。我也希望“全选”可以改变颜色。有什么想法可以实现吗？请。谢谢。

fiddle :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);