如何在选中的文本框下面写下文字？

这是我的HTML和jQuery代码。代码运行良好，但问题是当我点击一个复选框时，文本“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>

来源

2017-09-12 Hardi Shah

ID标签添加到您想与您的代码为目标的复选框，并使用#ID jQuery中做任何你想要的。 –

您可以使用DOM遍历方法来对付它们在当前元素上下文即this

.closest()可以使用遍历达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>

来源

2017-09-12 09:55:41 Satpal

如何在选中的文本框下面写下文字？

回答

相关问题