javascript – 突出显示“全选”的颜色变化

2023年8月31日 193次阅读

我有这个
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>

最佳答案
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);
  });

这是为了回答你的另一个问题,你需要知道如何使用选择器,它会帮助你很多,因为这只是可以实现你想做的样本,你可以使它更具体的选择器

https://jsfiddle.net/5z7zbaq2/2/
更改

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

至

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