Dynamically replace checkboxlist display text

Question

Could someone help me if there is any way to dynamically change the text of a checkboxlist control display text without removing the checkbox icon. I got the following HTML code:

<div class="classname1">
<div class="row checkbox-list list-container">
<label for="Example_Id">
<input type="checkbox" name="Example.Id" id="Example_Id" value="3"> Replace this text.
</label>
</div>
</div>

Is there any way to change this entire text. Appreciate your help!!!

Answer 1

You can do this:

• Wrap the text inside a span
• Search for the label of the input using input.labels array
• Then, use label.querySelector('span') to get the span element
• Update the span text using span.textContent = ...

const span = window.Example_Id.labels[0].querySelector("span");

span.textContent = value;

Codesandbox: https://codesandbox.io/s/focused-brown-w6so1r?file=/src/index.js:94-186