Question

我想知道是否有任何方法可以动态更改无线电标签文本的文本。也许将标签文本包装到<span>标签中，以便我进一步对其进行样式设置。

我有以下单选按钮html：

<div class="radio-select" data-value="books-taxonomy">
   <input class="radio-input" type="radio" id="form-books-tax" name="bundle" value="books-taxonomy" checked="checked">
   <label class="radio-label" for="form-books-tax">CHANGE THIS LABEL TEXT</label>
</div>

这直接来自插件，很遗憾，我不能只编辑此文件的html。

有什么办法可以做到这一点？包括Jquery解决方案？

Answer 1

不要用div来包裹span，而要使用另一个div，可以使用wrap()，也可以这样替换label文本：< / p>

$('.radio-select').wrap('<div class="container"></div>').find('label').text('bingo!').attr('data', 'books-taxonomy');

.container {
  background: #5eba7d;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="radio-select" data-value="books-taxonomy">
  <input class="radio-input" type="radio" id="form-books-tax" name="bundle" value="books-taxonomy" checked="checked">
  <label class="radio-label" for="form-books-tax">CHANGE THIS LABEL TEXT</label>
</div>

编辑：如果要将text包装在label中，可以使用wrapInner()：

$('.radio-select label').wrapInner('<span></span>').text('bingo!')

编辑2：另外，根据您的评论，您可以尝试以下操作：

 $('label[for=form-books-tax]').wrapInner('<span></span>').text('bingo!');

Answer 2

您可以根据标签中的for属性更改确切的标签名称。这是提供的解决方案。如果需要，您可以替换for属性以进行动态替换。

问题：

<div class="radio-select" data-value="books-taxonomy">
   <input class="radio-input" type="radio" id="form-books-tax" name="bundle" value="books-taxonomy" checked="checked">
   <label class="radio-label" for="form-books-tax">CHANGE THIS LABEL TEXT</label>
</div>

O / P：

$(document).ready(function(){
  $('#form-books-tax').next('label').attr("for", 'form-books-tax').text('Replace Your New Name Here');
});

动态替换复选框/无线电标签文本

2 个答案: