Change Nearest Class when checkbox is selected

314
February 22, 2017, at 00:06 AM

I want to use jquery/javascript to change the class of the <span class="thm-card-status">Active</span> when the item is checked/unchecked. There will be a lot of <div class="thm-card"></div> containers so it should only be changed for that specific card.

  <div class="thm-card">
    <div class="thm-card-media">
      <img id="editableimage1" src="https://thehomemag.com/Images/HomeSlider/8.jpg" alt="#" class="img-responsive">
      <div class="thm-card-overlay">
        <form class="thm-form">
          <div class="form-group"><!--Default Checkbox Item-->
            <label for="__FOR__">
              <input type="checkbox" class="square thm-checkbox-status" id="__ID__" type="checkbox" value="true">
              <span class="thm-form-label-side">Active</span>
            </label>
            <a href="#" title="What is this?" data-toggle="popover" data-placement="top" data-content="You can make this slide active by checking this option." data-trigger="hover" class="thm-text-link-default"><i class="fa fa-question-circle"></i></a>
          </div>
        </form><!--Form-->
      </div>
      <span class="thm-card-status">Active</span>
    </div>
    <div class="thm-card-content">
      <div class="thm-card-details">
        <h4>THM Slider Main</h4>
      </div>
    <div class="thm-card-control">
      <div class="thm-card-links">
        <a href="#" class="thm-text-link-card" title="View">View</a>
        <a href="#" class="thm-text-link-card" onclick="return launchEditor('editableimage1', 'https://thehomemag.com/Images/HomeSlider/8.jpg');">Edit</a>
        <span class="thm-card-info"><i class="fa fa-star-o"></i></span>
        <span class="thm-card-info"><i class="fa fa-trash"></i></span>
      </div>
    </div>
    </div>
  </div>

EDIT: I've tried:

$('.thm-checkbox-status').change(function() {
    if($(this).is(':checked')) {
        $('.thm-card-status').attr('checked', '').closest('.thm-card-status').addClass('thm-card-status-active');
    } else {
        $('.open_sub_ja').closest('div').removeClass('someclass');
    }
});

And

$("thm-checkbox-status:checkbox").on('change', function(){
        $(this).closest('.thm-card-status').attr('class', 'thm-card-status-active');;
});
Answer 1

As stated above, StackOverflow is not a code writing service. Going off of what you wrote in your comments, here's a working example. I made the thm-card-status-active green, so that you can see it work.

$(function() { 
 
  $('input.thm-checkbox-status').change(function() {  
     
    if($(this).prop("checked") == true){ 
      $(this).closest('div.thm-card').find('span.thm-card-status').addClass('thm-card-status-active');  
    } else { 
      $(this).closest('div.thm-card').find('span.thm-card-status').removeClass('thm-card-status-active');  
    } 
     
  }); 
 
});
.thm-card-status-active { 
  color: green; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="thm-card"> 
    <div class="thm-card-media"> 
      <img id="editableimage1" src="https://thehomemag.com/Images/HomeSlider/8.jpg" alt="#" class="img-responsive"> 
      <div class="thm-card-overlay"> 
        <form class="thm-form"> 
          <div class="form-group"><!--Default Checkbox Item--> 
            <label for="__FOR__"> 
              <input type="checkbox" class="square thm-checkbox-status" id="__ID__" type="checkbox" value="true"> 
              <span class="thm-form-label-side">Active</span> 
            </label> 
            <a href="#" title="What is this?" data-toggle="popover" data-placement="top" data-content="You can make this slide active by checking this option." data-trigger="hover" class="thm-text-link-default"><i class="fa fa-question-circle"></i></a> 
          </div> 
        </form><!--Form--> 
      </div> 
      <span class="thm-card-status">Active</span> 
 
    </div> 
    <div class="thm-card-content"> 
      <div class="thm-card-details"> 
        <h4>THM Slider Main</h4> 
      </div> 
    <div class="thm-card-control"> 
      <div class="thm-card-links"> 
        <a href="#" class="thm-text-link-card" title="View">View</a> 
        <a href="#" class="thm-text-link-card" onclick="return launchEditor('editableimage1', 'https://thehomemag.com/Images/HomeSlider/8.jpg');">Edit</a> 
        <span class="thm-card-info"><i class="fa fa-star-o"></i></span> 
        <span class="thm-card-info"><i class="fa fa-trash"></i></span> 
      </div> 
    </div> 
    </div> 
  </div>

Answer 2
$('.thm-checkbox-status').change(function(){
     $(this).closest('.thm-card-overlay').next().addClass('something');
});
Rent Charter Buses Company
READ ALSO
How do I get Date Range Picker selected date to a variable?

How do I get Date Range Picker selected date to a variable?

hi i am using data range picker for filter optionthere is change with default date picker range is

519
insert date picker in the new appended row

insert date picker in the new appended row

how to insert date picker in a newly appended row using jquery

360
Compare two dates with JavaScript

Compare two dates with JavaScript

Can someone suggest a way to compare the values of two dates greater than, less than, and not in the past using JavaScript? The values will be coming from text boxes

1575