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() 作为Warning: Use of undefined constant test - assumed 'test' (this will throw an Error in a future version of PHP) in ... This is test string来完成。请注意，如果更改选择，则在这种情况下，第一个选择将保持红色。为防止出现这种情况，您还需要使用$('.oneBox').not(this).parent().css('color', 'red')将所选元素告知inherit颜色。

这可以在以下内容中看到：

$(this).parent().css('color', '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');
    }
  });
});

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

2 个答案: