使用 jQuery 更改未选中复选框文本的颜色

Question

我希望更改未选中复选框的标签颜色。到目前为止，我的 jQuery 代码只允许选中一个复选框。有没有办法让未选中的复选框标签文本在选择/选中另一个选项时变为不同的颜色？这是我的 HTML：

              <label><input class="oneBox" type="checkbox" >Wednesday June 6th</label>

              <label><input class="oneBox" type="checkbox" >Friday June 8th</label>

这里是只检查一个框的 jQuery：

      $(document).ready(function(){
           $('.oneBox').on('change', function() {
               $('.oneBox').not(this).prop('checked', false);
                    $('#result').html($(this).data( "id" ));

      if($(this).is(":checked"))
           $('#result').html($(this).data( "id" ));
      });
  });

谢谢！

Answer 1

 $(document).ready(function(){
           $('label').addClass('default');
           $('.oneBox').on('change', function() {
            $('.oneBox').not(this).parents('label').removeClass("checked").addClass('oneBox');
            // $('.oneBox').attr('class', 'oneBox');
               $('.oneBox').not(this).prop('checked', false);
               $(this).parents('label').removeClass("oneBox").addClass("checked");
              
      if($(this).is(":checked"))
           $('#result').html($(this).data( "id" ));
          
      });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.default {
 color: blue;
}
.checked {
color: red;
}
</style>
<label>
<input class="oneBox" type="checkbox" data-id="Wednesday" >Wednesday June 6th</label>
              <label ><input class="oneBox" type="checkbox" data-id="Friday" >Friday June 8th</label>
              
<div id="result"></div>

Answer 2

您需要做的就是将 .parent() 设置为您想要的颜色。这可以通过使用 .css() 来完成，例如 $('.oneBox').not(this).parent().css('color', 'red')。请注意，如果您更改选择，在这种情况下，第一个选择将保持红色。为了防止这种情况，您还需要使用$(this).parent().css('color', 'inherit') 将颜色告诉inherit。

这可以在下面看到：

$(document).ready(function() {
  $('.oneBox').on('change', function() {
    $('.oneBox').not(this).prop('checked', false);
    //$('#result').html($(this).data("id"));
    if ($(this).is(":checked")) {
      //$('#result').html($(this).data("id"));
      $('.oneBox').not(this).parent().css('color', 'red');
      $(this).parent().css('color', 'inherit');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label><input class="oneBox" type="checkbox">Wednesday June 6th</label>
<label><input class="oneBox" type="checkbox">Friday June 8th</label>