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

Textboxes to show and edit data

I currently have text boxes that have the border removed so they don't appear as text boxes and are read only. I also have an edit button that shows the border and allows a user to edit the information and save it to a database.
My question should I be displaying data in a text box? It just makes it easier to edit otherwise I would have to add the text box dynamically when the edit button is clicked.

Another option is a 'span' or 'div' with the html5 attrtibute 'contenteditable' set to true;
<div contenteditable="true"/>
You can toggle true/false on click button event.

You could just use a div tag and load your output there.
<div id="output"></div>
It would remain invisible until used, and it would not be editable, and of course you could mark it up any way you like if you want the output area to stand out later.

You can try like this with jquery-
Html :
<input type="text" id="data" disabled="true" value="sampel data"/>
<input type="button" id="button" value="Edit" />
Jquery:
$("#button").click(function(){
$("#data").attr("disabled", false);
});
Live Preview

Unchecking a radio box without use of id's

I'm setting up a table, where each row will contain several radio boxes. There are certain conditions for the radio boxes, for example:
If "Home" is checked, the "Text" radio box will be unchecked and "Voice" will be checked instead (ie. You can't text a home phone number). Similarly, when "Home" and "Voice" are checked, clicking "Text" will force "Home" to be unchecked and "Cell" will become checked.
I can get this working fine for one instance, with the use of .getElementById and the click function, but where I run into trouble is when things are scaled up. This table might have 20 or 30 rows, each of which containing a cell with these radio boxes.
I'm not great with jQuery, so I'm not sure how to make a more general version, so that each set of radio boxes are their own contained units, so to speak. I made a jsfiddle where you can see that only the first instance is working, likely because I am targeting the boxes using their id and you can't have two elements with the same id... help? Thanks!
http://jsfiddle.net/3uHqS/
Script
$( document ).ready(function() {
document.getElementById('contact-home').onclick = function () {
document.getElementById('format-voice').checked = true;
};
document.getElementById('format-text').onclick = function () {
document.getElementById('contact-cell').checked = true;
};
});
HTML
<form>
<input type="radio" name="contact" value="" id="contact-cell" />
<label for="contact-cell">Cell</label>
<input type="radio" name="contact" value="" id="contact-home" />
<label for="contact-home">Home</label>
<input type="radio" name="format" value="" id="format-voice" />
<label for="format-voice">Voice</label>
<input type="radio" name="format" value="" id="format-text" />
<label for="format-text">Text</label>
</form>

You are going to want to assign every radio box a descriptive class like 'text-radio' or 'home-radio'. Then when you need to change all of the Text radio boxes you do something like the following in jQuery:
$(".text-radio").attr('checked', 'checked');

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"

Select text (almost) next to an element

I need to wrap a radio button and the text next to it in a label, just to be more user-friendly.
I had a similar problem a few days ago, where I have a checkbox and immediately after I had a span element. And I could wrap both elements.
I have this HTML:
<span class="Attribute">
<input type="radio" name="vMONHRDREM" value="S">
<script type="text/javascript">gx.dom.setAttribute("vMONHRDREM","gxoch0","if(!(gx.evt.jsEvent(this))) return false;");</script>
Ativado
<input type="radio" name="vMONHRDREM" value="N">
<script type="text/javascript">gx.dom.setAttribute("vMONHRDREM","gxoch0","if(!(gx.evt.jsEvent(this))) return false;");</script>
Desativado
</span>
Unfortunately, I cannot change the HTML structure as I use a tool that generates the pages.
I'm trying to do something like this:
$("input[type=radio]").each(function(){
alert($(this).next().next().text());
});
But it's not working. It doesn't return anything. If I change to $(this).next().text() I get the script text.

$("input[type=radio]").each(function(){
var text = $(this).next().get(0).nextSibling.nodeValue;
});

Input elements don't have text content, what you have is rogue textnodes, and you'll need to target those together with the inputs, and then wrap them with label tags:
$('.Attribute input[type="radio"]').each(function() {
$(this).addBack()
.add($(this).next('script')[0].nextSibling)
.wrapAll('<label></label>');
});
FIDDLE