CODEWITHSUNDEEP
javascriptjqueryhtmlcss
anbhd
anbhd

Reputation: 125

Changing colour of unchecked checkbox text with jQuery

I'm looking to change the label colour of an unchecked checkbox. So far I have jQuery code that only allows one checkbox to be checked. Is there a way so that the unchecked checkbox label text changes to a different colour when the other option is chosen/checked? Here's my HTML: 

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

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

And here's the jQuery for only one box to be checked:

      $(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" ));
      });
  });

Thank you!

Upvotes: 1

Views: 1324

Answers (2)

Daman Pal Singh Khanna
Daman Pal Singh Khanna

Reputation: 135

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

Upvotes: 1

Obsidian Age
Obsidian Age

Reputation: 42304

All you need to do is set the .parent() to be the colour you desire. This can be done through the use of .css(), as $('.oneBox').not(this).parent().css('color', 'red'). Note that if you change the selection, the first selection will stay red in this case. To prevent this, you'll also want to tell the selected element to inherit the colour with $(this).parent().css('color', 'inherit').

This can be seen in the following:

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

Upvotes: 0

Related Questions