チェックされたテキストボックスの下にテキストを書き込む方法は？

Question

ここに私のHTMLとjQueryのコードです。コードはうまくいきましたが、問題は1つのチェックボックスをクリックすると、そのテキストの代わりにすべてのチェックボックスの下にテキスト "FINISHED"が表示されます。

私のhtmlコードは次のとおりですまでトラバースするのに使用することができ

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

Answer 1

あなたはthis

.closest()すなわち、現在の要素のコンテキストでそれらをターゲットにするDOMのトラバーサル方法を使用することができますlabelを入力し、.next()を使用して<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>