javascript - 切换所有 div 元素的文本颜色

Question

有没有办法在复选框被选中时将所有文本颜色更改为黑色，而在未选中时恢复为原始颜色？

我尝试使用切换，但不确定如何保留原始颜色。 当前代码在下面，这里是一个 fiddle .

感谢您的帮助。

<div class="ws-css-table">
    <div class="ws-css-table-tr">
        <div class="ws-css-table-td">A</div>
        <div class="ws-css-table-td">B</div>
    </div>
    <div class="ws-css-table-tr">
        <div class="ws-css-table-td">C</div>
        <div class="ws-css-table-td">D</div>
    </div>
    <div class="ws-css-table-tr">
        <div class="ws-css-table-td">E</div>
        <div class="ws-css-table-td">F</div>
    </div>
</div>

    </br>
<input type="checkbox" id="blacktext">Black Text

j查询

 var colors = ['red', 'blue', 'purple', 'green'];

$(document).ready(function () {
  $('.ws-css-table-td').each(function ()
 {      
  var theColor = colors[Math.floor(Math.random() * colors.length)];
    $(this).css('color', theColor);
});
    });

CSS:

.ws-css-table {
    display: table;
}
.ws-css-table-tr {
    display: table-row;
}
.ws-css-table-td {
    display: table-cell;
    border:1px solid #000;
    width: 15px;
    height:15px;
    text-align:center;
    vertical-align:middle;
}

Answer 1

 var colors = ['red', 'blue', 'purple', 'green'];

 $(document).ready(function() {
   $('.ws-css-table-td').each(function() {
     var theColor = colors[Math.floor(Math.random() * colors.length)];
     $(this).css('color', theColor);
   });
 });


 $('#blacktext').click(function() {

   $('.ws-css-table-td').toggleClass('blackcolor');

 })

.ws-css-table {
  display: table;
}
.ws-css-table-tr {
  display: table-row;
}
.ws-css-table-td {
  display: table-cell;
  border: 1px solid #000;
  width: 15px;
  height: 15px;
  text-align: center;
  vertical-align: middle;
}
.blackcolor {
  color: #000!important
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ws-css-table">
  <div class="ws-css-table-tr">
    <div class="ws-css-table-td">A</div>
    <div class="ws-css-table-td">B</div>
  </div>
  <div class="ws-css-table-tr">
    <div class="ws-css-table-td">C</div>
    <div class="ws-css-table-td">D</div>
  </div>
  <div class="ws-css-table-tr">
    <div class="ws-css-table-td">E</div>
    <div class="ws-css-table-td">F</div>
  </div>
</div>

</br>
<input type="checkbox" id="blacktext">Black Text