时间戳

首页 > 解决方案 > 使用 jQuery 更改未选中复选框文本的颜色

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

问题描述

我正在寻找更改未选中复选框的标签颜色。到目前为止，我的 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" ));
      });
  });

谢谢！

标签： javascriptjqueryhtmlcss

解决方案

 $(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>

推荐阅读