CODEWITHSUNDEEP
javascriptjqueryinput
Paul
Paul

Reputation: 3368

Getting an image to show based on a checkbox:checked

I have created a function fadeBoolToggle which fades in and out based on the boolean value.

I added code to make my checkboxes act like radio buttons. Then I created a variable to set a limit to 1 limitCal (My real code requires checkboxes, so radio inputs could not be used). This is working fine.

What isn't working is that I can't figure out how to get my image to not show when the input is no longer selected.

Does anyone see what I am doing wrong?

jQuery.fn.fadeBoolToggle = function (bool) {
        return bool ? this.fadeIn(400) : this.fadeOut(400);
    }
var limitCal = 1;
$('.calendar-check').on('change', function() {
  $('.calendar-check').prop('checked', false);
  $(this).prop('checked', true);
  if (!this.checked || $('.calendar-check:checked').length <= limitCal) {
    $(this).parents('.product-wrap:first').find('.checkmark-img').fadeBoolToggle(this.checked);
  }
});
.checkmark-img {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="calendar-box">
  <div class="product-wrap">
    <label for="cal-2year" class="package-check-toggle">
      <h4 class="calendar-box-title">A</h4>
      <img src="images/checkmark-circle.png" class="checkmark-img total-center">
    </label>
    <input type="checkbox" class="calendar-check" id="cal-2year">
  </div>
</div>
<div class="calendar-box">
  <div class="product-wrap">
    <label for="cal-whiteboard" class="package-check-toggle">
       <h4 class="calendar-box-title">B</h4>
       <img src="images/checkmark-circle.png" class="checkmark-img total-center">
    </label>
    <input type="checkbox" class="calendar-check" id="cal-whiteboard">
  </div>
</div>
<div class="calendar-box">
  <div class="product-wrap">
    <label for="cal-glance" class="package-check-toggle">
      <h4 class="calendar-box-title">C</h4>
      <img src="images/checkmark-circle.png" class="checkmark-img total-center">
    </label>
    <input type="checkbox" class="calendar-check" id="cal-glance">
  </div>
</div>

Upvotes: 0

Views: 180

Answers (2)

nnnnnn
nnnnnn

Reputation: 150020

Your current code only ever calls .fadeBoolToggle() on the just-checked checkbox's corresponding image. At that point this.checked is true, so the current image fades in as desired. But you have no code to fade out the image from the previously checked box.

Here's one way to do that, simplifying your code along the way (notice you don't really need your .fadeBoolToggle() for this code, because its argument is always hardcoded so you could just use .fadeOut() and .fadeIn(), but I've left your function in place):

jQuery.fn.fadeBoolToggle = function (bool) {
        return bool ? this.fadeIn(400) : this.fadeOut(400);
    }
var limitCal = 1;
$('.calendar-check').on('change', function() {
  $('.calendar-check').not(this) // select the *other* checkboxes
    .prop('checked', false)      // uncheck them
    .closest('.product-wrap')    // select their wrappers
    .find('.checkmark-img')      // find their images
    .fadeBoolToggle(false);      // fade them out
  this.checked = true;           // check current checkbox
  $(this).closest('.product-wrap') // get current one's wrapper
    .find('.checkmark-img')      // find current image
    .fadeBoolToggle(true);       // fade it in
});
.checkmark-img {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="calendar-box">
  <div class="product-wrap">
    <label for="cal-2year" class="package-check-toggle">
      <h4 class="calendar-box-title">A</h4>
      <img src="images/checkmark-circle.png" class="checkmark-img total-center">
    </label>
    <input type="checkbox" class="calendar-check" id="cal-2year">
  </div>
</div>
<div class="calendar-box">
  <div class="product-wrap">
    <label for="cal-whiteboard" class="package-check-toggle">
       <h4 class="calendar-box-title">B</h4>
       <img src="images/checkmark-circle.png" class="checkmark-img total-center">
    </label>
    <input type="checkbox" class="calendar-check" id="cal-whiteboard">
  </div>
</div>
<div class="calendar-box">
  <div class="product-wrap">
    <label for="cal-glance" class="package-check-toggle">
      <h4 class="calendar-box-title">C</h4>
      <img src="images/checkmark-circle.png" class="checkmark-img total-center">
    </label>
    <input type="checkbox" class="calendar-check" id="cal-glance">
  </div>
</div>

I'm assuming you don't want to be able to uncheck all of the checkboxes (so they behave like radios).

Upvotes: 1

kind user
kind user

Reputation: 41893

I have slimmed your code a little bit. Check if it's fine for you.

Do you want to be able to uncheck the checked checkbox?

$('.calendar-check').on('change', function(){
  $('.calendar-check').parent().find('img').fadeOut();
  $('.calendar-check').not(this).prop('checked', false);
  $('.calendar-check:checked').parent().find('img').fadeIn();
});
.checkmark-img {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="calendar-box">
  <div class="product-wrap">
    <label for="cal-2year" class="package-check-toggle">
      <h4 class="calendar-box-title">A</h4>
      <img src="images/checkmark-circle.png" class="checkmark-img total-center">
    </label>
    <input type="checkbox" class="calendar-check" id="cal-2year">
  </div>
</div>
<div class="calendar-box">
  <div class="product-wrap">
    <label for="cal-whiteboard" class="package-check-toggle">
       <h4 class="calendar-box-title">B</h4>
       <img src="images/checkmark-circle.png" class="checkmark-img total-center">
    </label>
    <input type="checkbox" class="calendar-check" id="cal-whiteboard">
  </div>
</div>
<div class="calendar-box">
  <div class="product-wrap">
    <label for="cal-glance" class="package-check-toggle">
      <h4 class="calendar-box-title">C</h4>
      <img src="images/checkmark-circle.png" class="checkmark-img total-center">
    </label>
    <input type="checkbox" class="calendar-check" id="cal-glance">
  </div>
</div>

Upvotes: 2

Related Questions