CODEWITHSUNDEEP
javascriptjqueryhtml
Hardi Shah
Hardi Shah

Reputation: 343

How to write text below checked textbox?

Here is my HTML and jQuery code. The code is working good but the problem is when I click on one checkbox, the text "FINISHED" becomes visible below all the checkboxes instead of that one only.

My html code is:

$('.label__checkbox').click(function() {
  if ($(".label__checkbox").is(':checked')) {
    $(".finish").css("display", "block");
  } else {
    $(".finish").css("display", "none");
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="center">
  <label class="label">
        <input  class="label__checkbox" type="checkbox" />
        <span class="label__text">
          <span class="label__check">
            <i class="fa fa-check icon"></i>
          </span>
        </span>
      </label>
  <span class="finish">FINISHED</span>
</div>
<div class="center">
  <label class="label">
        <input  class="label__checkbox" type="checkbox" />
        <span class="label__text">
          <span class="label__check">
            <i class="fa fa-check icon"></i>
          </span>
        </span>
      </label>
  <span class="finish">FINISHED</span>
</div>
<div class="center">
  <label class="label">
        <input  class="label__checkbox" type="checkbox" />
        <span class="label__text">
          <span class="label__check">
            <i class="fa fa-check icon"></i>
          </span>
        </span>
      </label>
  <span class="finish">FINISHED</span>
</div>
<div class="center">
  <label class="label">
        <input  class="label__checkbox" type="checkbox" />
        <span class="label__text">
          <span class="label__check">
            <i class="fa fa-check icon"></i>
          </span>
        </span>
      </label>
  <span class="finish">FINISHED</span>
</div>

Upvotes: 1

Views: 67

Answers (1)

Satpal
Satpal

Reputation: 133403

You can use DOM traversal method to target them in the current element context i.e. this

.closest() can be use to traverse up to label then use .next() to target the <span>

$('.label__checkbox').change(function() {
  var finish = $(this).closest('.label').next(".finish");
  //var finish = $(this).closest('.center').find(".finish");
  if ($(this).is(':checked')) {
    finish.css("display", "block");
  } else {
    finish.css("display", "none");
  }
}).trigger('change');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="center">
  <label class="label">
    <input  class="label__checkbox" type="checkbox" />
    <span class="label__text">
      <span class="label__check">
        <i class="fa fa-check icon"></i>
      </span>
    </span>
  </label>
  <span class="finish">FINISHED</span>
</div>
<div class="center">
  <label class="label">
    <input  class="label__checkbox" type="checkbox" />
    <span class="label__text">
      <span class="label__check">
        <i class="fa fa-check icon"></i>
      </span>
    </span>
  </label>
  <span class="finish">FINISHED</span>
</div>

Upvotes: 3

Related Questions