jquery - 带有复选框的表格单元格背景颜色更改

Question

$('#selectall1').click(function(event) {
  if (this.checked) {
    $('.first').each(function() {
      this.checked = true;
    });
    $('.second').each(function() {
      this.checked = false;
    });
    $('.third').each(function() {
      this.checked = false;
    });
  } else {
    $('.first').each(function() {
      this.checked = false;
    });
  }
});

$('#selectall2').click(function(event) {
  if (this.checked) {
    $('.second').each(function() {
      this.checked = true;
    });
    $('.first').each(function() {
      this.checked = false;
    });
    $('.third').each(function() {
      this.checked = false;
    });
  } else {
    $('.second').each(function() {
      this.checked = false;
    });
  }
});

$('#selectall3').click(function(event) {
  if (this.checked) {
    $('.third').each(function() {
      this.checked = true;
    });
    $('.first').each(function() {
      this.checked = false;
    });
    $('.second').each(function() {
      this.checked = false;
    });
  } else {
    $('.third').each(function() {
      this.checked = false;
    });
  }
});

$(':checkbox').on('change', function() {
  var th = $(this),
    name = th.prop('name');
  if (th.is(':checked')) {
    $(':checkbox[name="' + name + '"]').not($(this)).prop('checked', false);
  }
});

$("input:checkbox[class='first']").click(function() {
  $(this).parent().toggleClass("highlight1");
});

$("input:checkbox[class='second']").click(function() {
  $(this).parent().toggleClass("highlight2");
});

$("input:checkbox[class='third']").click(function() {
  $(this).parent().toggleClass("highlight3");
});

div.highlight1 {
    background-color: #9FF781;
}
div.highlight2 {
    background-color: #F78181;
}
div.highlight3 {
    background-color: #8181F7;
}
div.highlight {
    background-color: #EEEEEE;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<table border="1">
  <tr>
    <th>
      <INPUT type="checkbox" id="selectall1" />
    </th>
    <th>
      <INPUT type="checkbox" id="selectall2" />
    </th>
    <th>
      <INPUT type="checkbox" id="selectall3" />
    </th>
  </tr>
  <tr>
    <td>
      <div>
        <input type="checkbox" class="first" name="1" />
      </div>
    </td>
    <td>
      <div>
        <input type="checkbox" class="second" name="1" />
      </div>
    </td>
    <td>
      <div>
        <input type="checkbox" class="third" name="1" />
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <div>
        <input type="checkbox" class="first" name="2" />
      </div>
    </td>
    <td>
      <div>
        <input type="checkbox" class="second" name="2" />
      </div>
    </td>
    <td>
      <div>
        <input type="checkbox" class="third" name="2" />
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <div>
        <input type="checkbox" class="first" name="3" />
      </div>
    </td>
    <td>
      <div>
        <input type="checkbox" class="second" name="3" />
      </div>
    </td>
    <td>
      <div>
        <input type="checkbox" class="third" name="3" />
      </div>
    </td>
  </tr>
</table>

我想在选中相应的复选框时更改 td 背景颜色。用户必须在三个复选框中选择仅一个。用户必须能够在需要时立即选择所有复选框，并且相应的复选框和背景颜色 应该更改。我有一些东西但还没有完全完成。我在某个地方构造，那里有一些冗余。

Demo fiddle here

Answer 1

怎么样:

var selectall = $('.selectall');
selectall.click(function (event) {
    $('.' + $(this).data('class')).each(function () {
        this.checked = true;
        highlight(this, $(this).closest('td'));
    });
});

$('input[type=radio]').not(selectall).on('click', function() {
    highlight(this, $(this).closest('td'));
});

function highlight(radio, radioCell) {
    if (radio.checked) {
        radioCell.closest('tr').children('td.highlight').removeClass('highlight');
        radioCell.addClass('highlight');
    }
}

td:nth-child(3n + 1).highlight {
    background-color: #9FF781;
}
td:nth-child(3n + 2).highlight {
    background-color: #F78181;
}
td:nth-child(3n + 3).highlight {
    background-color: #8181F7;
}
div.highlight {
    background-color: #EEEEEE;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
    <tr>
        <th>
            <INPUT type="radio" name="selectall" id="selectall1" class="selectall" data-class="first" />
        </th>
        <th>
            <INPUT name="selectall" type="radio" id="selectall2" class="selectall" data-class="second" />
        </th>
        <th>
            <INPUT name="selectall" type="radio" id="selectall3" class="selectall" data-class="third" />
        </th>
    </tr>
    <tr>
        <td>
            <div>
                <input type="radio" class="first" name="1" />
            </div>
        </td>
        <td>
            <div>
                <input type="radio" class="second" name="1" />
            </div>
        </td>
        <td>
            <div>
                <input type="radio" class="third" name="1" />
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <div>
                <input type="radio" class="first" name="2" />
            </div>
        </td>
        <td>
            <div>
                <input type="radio" class="second" name="2" />
            </div>
        </td>
        <td>
            <div>
                <input type="radio" class="third" name="2" />
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <div>
                <input type="radio" class="first" name="3" />
            </div>
        </td>
        <td>
            <div>
                <input type="radio" class="second" name="3" />
            </div>
        </td>
        <td>
            <div>
                <input type="radio" class="third" name="3" />
            </div>
        </td>
    </tr>
</table>