We Keep Coding

Dynamically replace checkboxlist display text

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!!!

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

How to change span text of a radio button

I need to change the text in the span tag next to a list of radiobuttons using Javascript.
I cant change the code that create the the below code.
Depending on a given condition, I need to modify the text of one of the radio button text.
I can disable a button using the index.
document.getElementsByName("estimate[id]")[0].disabled = true;
I can change all the span text values
var $label = $('input[type=radio]').next();
$label.text('Options');
But I cant find out how to change the text on one of the buttons.
<form action="/cart/set_estimate" accept-charset="UTF-8"
id="estimate_shipping_results" autocomplete="off"
method="post">
<dl id="estimates">
<dt><input type="radio" name="estimate[id]" value="170361"
checked="checked"/>
<span>Entrega Jueves-Viernes</span></dt>
<dd>$2.000</dd>
<dt><input type="radio" name="estimate[id]" value="170483"/>
<span>Entrega 48h hábiles</span></dt>
<dd>$3.500</dd>
</dl>
div class="estimate_shipping_buttons">
<input id="set_shipping_button" type="submit" value="Definir Envío"/>
</div>
</form>

I dont know if I understand your issue right, but to change the text of one span, next to the radio button, you can use:
document.getElementsByName("estimate[id]")[0].parentElement.querySelector('span').innerHTML = "text";

Load text from html form to div

I am trying...(I know very trying for all you guys lol) no but seriously I am trying to pass the text from a form to a div, which then other scripts change the font and the colour of the text. Here is the code I have tried so far and a link to the jsfiddle. I just can't get it to work!
Similar questions have been asked but none I can find where other scripts then need to run on that inputted text once it has been inputted.
http://jsfiddle.net/p802ektq/
The Div:
<div class="rightBottom selectcolor" style = "position: absolute; left: 750; top: 330;" id="changeMe"></div>
The HTML form:
<form>
Address <input type="text" name="add"><br>
<input id="copy" type="button" value="copy">
</form>
The Java:
$(document).ready(function() {
$('#copy').click(function(){
$('#changeMe').val($('#add').val() );
});
});

Fiddle example
First let's remember one thing:
name = name
. = class
# = id
you cannot go for #add if you don't have any in your Document. So let's add some:
<input id="add" name="add" type="text">
Now, if you want to insert some text String into a <div> (#changeMe) element, what you want is .text() or .html() (not .val() !).
$(function() { // d. ready
$('#copy').click(function( event ){
event.preventDefault(); // Prevent browser default behavior on form button
$('#changeMe').text( $('#add').val() );
});
});

How to prevent checking checkbox when added dynamically to a div?

so I've been struggling with this issue.
I want to add a checkbox into a div dynamically by clicking a button. Let's say I already have 2 checkboxes in the div, then I uncheck those 2. When I click the button, the checkboxes become 3 (which is what I want), but all those 3 will be checked. What I want is when I add a checkbox, the other checkbox(s)' checked state remain the same as before.
Here is my code (http://jsfiddle.net/gr2o47wt/4/):
HTML:
<div id="chkbox_container">
<input type="checkbox" checked>Check<br />
</div>
<input type="button" value="Add CheckBox" onClick="addCheckBox();">
JavaScript:
function addCheckBox() {
txt = "<input type=\"checkbox\" checked>Check<br />";
document.getElementById('chkbox_container').innerHTML += txt;
}
Thanks in advance for your answers! :)

You can use insertAdjacentHTML() rather than manipulating the innerHTML:
<input type="button" value="Add CheckBox"
onClick="document.getElementById('chkbox_container').insertAdjacentHTML('beforeend','<input type=\'checkbox\' checked=\'checked\' />Check<br />');">
JS Fiddle demo.
The problem you had was that the original HTML (as returned by innerHTML) is from the source of the page, not the DOM; and therefore the checked/unchecked nature of the checkbox originally in place was restored.
insertAdjacentHTML() simply adds the HTML string in the specified place ('beforeend' in this case).
More or less as an aside, it's worth trying, where possible, to keep your event-handling outside of your HTML elements; and binding those event-handlers in the JavaScript itself. This makes for somewhat easier maintainability, and would lead to code like the following:
// note that I gave the button an 'id' for simplicity:
var button = document.getElementById('addCheckboxes');
button.addEventListener('click', function () {
document.getElementById('chkbox_container').insertAdjacentHTML('beforeend', '<input type=\'checkbox\' checked=\'checked\' />Check<br />');
});
JS Fiddle demo.
Finally, some of your HTML is invalid (or at least erroneous), an <input /> is a void element, it can have no descendants; therefore it either has no closing tag (just: <input>) or self-closes (<input />).
Further, the text beside the checkboxes is a little misleading, usually with an HTML form the text beside the <input /> will focus that input; that's achieved by using a <label> element to associate the text with the control, for example:
<label><input type="checkbox" /> click</label>
JS Fiddle demo.
Or:
<input type="checkbox" id="inputElementID" />
<label for="inputElementID">click</label>
But this latter form does require the dynamic generation of ids (which is a little beyond the scope of this question).
References:
insertAdjacentHTML().

Modify the text of my radio input button?

Your average radio button has a name and value, but also some text next to it, in this case "Change this text."
How can I change this in javascript? Or even alert it? AFAIK, it is NOT the .inner html.
HTML:
<input type="radio" name="radioOption1" value="Array 1"> Change this text
Javascript
var confirmIExist = document.getElementsByName("radioOption1");
alert(confirmIExist.innerHTML);
//alerts undefined
If it's not .innerHTML, what is it? if I grab the input object with either getElementByName or getElementById, what chunk after that represents the Alert text?

You could use alert(confirmIExist[0].nextSibling.textContent), but wouldn't it be better to place the text next to the radio button in a <label> and then get the inner html of that
<input type="radio" id="radioOption1" name="radioOption1" value="Array 1"><label for="radioOption1" id="r1option">Change this text</label>
...
var label = document.getElementById("r1option");
alert(label.innerHTML);

You cannot set inner html for a input element. instead wrap your text with a and give it a ID
<input type="radio" name="radioOption1" value="Array 1"> <label id="radioText">Change this text</label>

input is a self-closing element. It cannot have innerHTML
nextSibling will return the Node that follows the radio button.
document.getElementsByName('radioOption1')[0].nextSibling.nodeValue = 'Text changed';
jsFiddle Demo

confirmIExist[0].nextSibling.textContent="abc"