We Keep Coding

how to replace radio buttons with newer radio buttons on a button click

Below is the code which creates radio buttons on button click, but i want it to replace previous radio buttons with newly generated ones on each button click instead of just appending to the old ones. Can someone please help.
<div id="radio_home">
<input type="button" name="check" value="GENERATE RADIO BUTTON" onclick="gen();"><br/>
</div>
<script>
var radio_home=document.getElementById("radio_home");
function makeRadioButton(name, value, text){
var label=document.createElement("label");
var radio=document.createElement("input");
radio.type="radio";
radio.name=name;
radio.value=value;
label.appendChild(radio);
label.appendChild(document.createTextNode(text));
return label;
}
function gen(){
var yes_button=makeRadioButton("yesbutton", "yes", "Oh Yea! DO it");
radio_home.appendChild(yes_button);
var no_button=makeRadioButton("nobutton", "no", "Oh No! DON'T do it");
radio_home.appendChild(no_button);
}

You can simply change the innerHTML of your element like this
radio_home.innerHTML = ""; //to empty the inner HTML of radio_home
radio_home.appendChild(yes_button); //then append child to it
You also need to take your button out of radio_home div as it will be removed once you empty the innerHTML

Problem using if/then command with "checkbox.checked === true" to hide/show an element when there's another checkbox involved

TL;DR: How to have a checkbox that displays a certain div element if all radio buttons are blank, but if you have a certain radio button selected, it will display a different div element when you check it. The code I have isn't working and I don't know why.
Sorry, this is going to be a very long and complicated question. I have a checkbox that shows or hides a class of div elements ("c") depending on whether or not the checkbox is checked, which has been working fine. I also have two radio buttons located elsewhere on the page, which, when selected (provided that "c" is also selected), each show different div elements that are located inside one of the "c" elements - let's call those inner divs "one" and "two". Those have been working fine as well.
By default, when the checkbox is checked, "one" is shown, even if neither radio button has been selected yet. If someone checks the checkbox and then the radio button for "two", "one" disappears and "two" takes its place. My difficulty is this: If someone checks "c" (thereby displaying "one" as well), then selects the radio button to display "two" instead of "one", unchecks "c" and then checks it again, I want "two" to reappear instead of "one". In other words, I want to still display "one" by default when "c" is checked, but I also want to make it so that if the radio button for "two" is already selected and the checkbox is unchecked, clicking the checkbox will show "two" instead of "one".
For the checkbox, I just have an onclick function that hides or shows "c" (via display:none / display:block) each time the checkbox is clicked. The two radio buttons work the same way (except the checkbox has to be selected in order for "w" or "d" to actually show up, since they're hidden if "c" is hidden).
Right now, the onclick function that hides/shows "c" says that if the radio button for "two" is selected, then "two" should show up; if not, then "one" should show up. (That's how I make "one" display by default without forcing it to appear whenever the checkbox is clicked, since neither radio button is selected when you load the page.) For some reason, it's not working, and I don't understand why.
Also, not sure if this matters, but the radio buttons are in one of the "c" elements and only appear when the checkbox is clicked. Anyway, here are the relevant parts of my code:
HTML:
<input type="checkbox" onclick="showdiv()"> Checkbox to show all divs in the class 'data'
<div class="data" style="display:none;">
<input type="radio" id="radio1" name="a" onclick="one()"> Radio button to show first div
<input type="radio" id="radio2" name="a" onclick="two()"> Radio button to show second div
</div>
<div class="data" style="display:none;">
<div id="one" style="display:none;">first div</div>
<div id="two" style="display:none;">second div</div>
</div>
Javascript:
<script type="text/javascript">
var data = document.getElementsByClassName("data");
var one = document.getElementById("one");
var two = document.getElementById("two");
function one() {
one.style.display = "block";
two.style.display = "none";
}
function two() {
two.style.display = "block";
one.style.display = "none";
}
function showdiv() {
for(var i = 0; i < data.length; i++) {
data[i].style.display === "none" ?
data[i].style.display = "block" :
data[i].style.display = "none";}
var checktwo = document.getElementById("radio2");
if (checktwo.checked === true) {
(two.style.display = "block") &&
(one.style.display = "none");}
else {
(one.style.display = "block") &&
(two.style.display = "none");}
}
</script>
What's happening is this: I check the checkbox to display "c" and "one" appears by default (as it should, since the function showdiv() says to show "one" only if the radio button for "two" isn't currently selected). I select the radio button to display "two" instead of "one", and that works fine. But then when I go to uncheck and re-check the box to display "c", "one" shows up when it should be showing "two".
Hopefully it's a simple fix - I basically learned Javascript just to make this thing I'm working on and I'm still figuring out basic stuff, so maybe I just missed something easy. I'd be eternally grateful to anyone who can help me out with this.

You're creating too many functions for just toggling one level deep, nested divs. Also, you should avoid using inline on* handlers (onclick, oninput, etc) and replace them with event listeners instead as follows:
All you need is two functions:
one function say, showdiv() for toggling the main div when the first input is clicked and,
another function say, showInnerDiv() for toggling the #one and #two divs.
Check and run the Code Snippet below for a practical example of the above:
var input = document.querySelector('input'); // retrieve first input
var innerBtns = document.querySelectorAll('input[type^="radio"]'); // retrieve the radio buttons
function showdiv() {
var data = document.querySelectorAll(".data"); // retrieve both .data divs
data.forEach(x => { //use forEach to toggle the display of each .data div
x.style.display = (x.style.display === "none") ? "block" : "none";
});
document.getElementById("one").style.display = "block";
document.getElementById("two").style.display = "none";
}
function showInnerDiv() {
var one = document.getElementById("one");
var two = document.getElementById("two");
var checktwo = document.getElementById("radio2");
if (checktwo.checked === true) {
two.style.display = "block";
one.style.display = "none";
}
else {
one.style.display = "block";
two.style.display = "none";
}
}
input.addEventListener("click", showdiv);
innerBtns.forEach(btn => { //use forEach to add a click listener to each radio button
btn.addEventListener("click", showInnerDiv);
})
#one {background-color:red; padding: 10px;margin-top: 10px;}
#two {background-color:yellow; padding: 10px;margin-top: 10px;}
<input type="checkbox"> Checkbox to show all divs in the class 'data'
<div class="data" style="display:none;">
<input type="radio" id="radio1" name="a"> Radio button - first div
<input type="radio" id="radio2" name="a"> Radio button - second div
</div>
<div class="data" style="display:none;">
<div id="one" style="display:none;">first div</div>
<div id="two" style="display:none;">second div</div>
</div>

Select Radio Button Using Javascript with No ID

I am trying to select a radio button on a webpage using Javascript inside an Applescript. For this particular button, there is no element ID, so I'm no really sure how to select this radio button.
There's really no other identifying elements for this form (or that I see, at least).
Note: There's several radio buttons on this page, and the only unique identifier between them is the "value."
HTML:
<input type="radio" size="4" name="Level" value="p;29">
Javascript/Applescript:
do JavaScript "document.getElementById('p;29').checked = true;" in doc

If you have no other input elements, you can safely use
document.getElementsByTagName("input")[0]
Otherwise, you can do:
for (i=0; i<document.getElementsByTagName('input').length; i++) {
var myInput = document.getElementsByTagName('input')[i];
if (myInput.type == 'radio')
{
//myInput is the radio element. Do something with it
}
}

I ended up using the value and name fields to target the element and check it. Here is the working script:
do JavaScript "var elements = document.getElementsByName('Level');
for (i=0;i<elements.length;i++) {
if(elements[i].value == 'p;29') {
elements[i].checked = true;
}
}" in doc

Radio Buttons clear check when clicked again

I have a set of three radio buttons and they have mutual exclusion in them, as I implemented group name property, but the problem is, in the initial stage, none of the radio button is selected,
But when I select any of the radio button, then I cannot deselect the same, although mutual exclusion is in progress, but I want them to deselect as well.
My code aspx is:
<td>
<asp:RadioButton ID="AChk" runat="server" CssClass="itemRightAlign" GroupName="A"/>
</td>
<td>
<asp:RadioButton ID="DChk" runat="server" CssClass="itemRightAlign" GroupName="A"/>
</td>
<td>
<asp:RadioButton ID="WChk" runat="server" CssClass="itemRightAlign" GroupName="A"/>
</td>

You have both a code problem and a misunderstanding.
The misunderstanding is about how the mutual exclusion radio buttons work (or are supposed to work) (or are expected by the users to work).
The code problem is that in a mutually exclusion radio buttons group you need to initially select one of them.
So, I believe there are two ways of solving the problem:
Keep the radio buttons groud. Add a "none" button to the set, so that it works as if none of the other three are selected. And initially select this "none" button.
change the radio buttons to check boxes, so the user might select and deselect each of them. Then implement your own exclusion logic. I don't recommend this one.

You would need to use javascript...
doing binding in jquery, it's easier, and the name= should match your rendered groupname "name=" attribute...
var lastChecked = null;
$('input[name=A]').click(function(){
if (lastChecked == this) {
this.checked = false;
lastChecked = null;
}
lastChecked = this;
});

Use this to deselect:
var radios = document.getElementsByName('A');
for(var i=0; i<radios.length; i++)
{
radios[i].checked = false;
}

You can deselect a radio button by using the attribute ondblclick.
<input type="radio" name="RadioGroup1
" value="1" ondblclick="uncheckRadio();">
Apple</label>
When you double click on the radio button, just call a javascript function to set the checked property to false.
function uncheckRadio() {
var choice = document.form1.RadioGroup1;
for (i = 0; i < choice.length; i++) {
if ( choice[i].checked = true )
choice[i].checked = false;
}
}

Here is a similar implementation using the attribute ondblclickand jQuery. Also, this will allow you to include this functionality within controls with a dynamically generated client ID.
Code behind:
foreach (ListItem li in rbl.Items)
li.Attributes.Add("ondblclick", string.Format("clearCurrentRadioButtonSelection(\"{0}\")", rbl.UniqueID));
ASPX page
function clearCurrentRadioButtonSelection(controlName) {
var id = "input[name=" + controlName + "]";
$(id).each(function () {
$(this).attr('checked', false);
});
}

JQuery Custom Radio Buttons code (code not working)

usual but I need to have different custom radio button images per button.
So Radio1 would have different images to Radio2.
Trying it out on the code below but it won't work so I must be doing something wrong?
Here's the code:
<label for="radio1">
<img src="radio1_unchecked.png" style="vertical-align:middle" />
<input name="radiogroup" type="radio" id="radio1" style="display:none;">
</label>
<label for="radio2">
<img src="radio2_unchecked.png" style="vertical-align:middle" />
<input name="radiogroup" type="radio" id="radio2" style="display:none;">
</label>
<script>
$(document).ready(function(){
var radio1checkedImage = "radio1_checked.png",
radio1uncheckedImage = "radio1_unchecked.png",
radio2checkedImage = "radio2_checked.png",
radio2uncheckedImage = "radio2_unchecked.png";
$('img').attr("src", radio1uncheckedImage);
$('#radio1, #radio2').change(function() {
var r;
r = $("#radio1");
r.prev().attr("src", r[0].checked ? radio1checkedImage : radio1uncheckedImage);
r = $("#radio2");
r.prev().attr("src", r[0].checked ? radio2checkedImage : radio2uncheckedImage);
});
});
</script>
Update: Here is the same code as above but without the multiple images.
As you can see it works. Can't the code be modified to have multiple images per radio?

You could use CSS to define which images goes with which radio button. Building on the JSBin example from my answer to you previous question, you can use JavaScript to add a classname (e.g. 'checked') to the parent of the checked radio (i.e. the <label>):
var radios = $('input:radio');
radios.change(function() {
radios.filter(':checked').parent().addClass('checked');
radios.filter(':not(:checked)').parent().removeClass('checked');
});
So, now that the <label> will have the 'checked' class if that radio is selected, you can use CSS to style it:
label {
/* regular styles */
}
label[for="radio1"].checked {
/* checked styles for #radio1's label */
}
label[for="radio2"].checked {
/* checked styles for #radio2's label */
}
Using CSS instead of <img> tags does mean you will need to use background-image, so be aware of that.
Live example: http://jsbin.com/ebapov/edit#javascript,html,live
Just in case, here is a more verbose version of the JavaScript posted above:
// Fetch the radio buttons (this is a jQuery collection):
var radios = $('input:radio');
radios.change(function() {
// Filter the radio inputs into 'checked' and 'unchecked':
var checkedInputs = radios.filter(':checked');
var uncheckedInputs = radios.filter(':not(:checked)');
// Get the 'checked' and 'unchecked' labels:
var checkedLabels = checkedInputs.parent();
var uncheckedLabels = uncheckedInputs.parent();
// Add the class "checked" to the checked labels:
checkedLabels.addClass('checked');
// ... and remove it from the unchecked labels:
uncheckedLabels.removeClass('checked');
});
Most of this code relies on the fact that jQuery functions can be chained. This means that when you call the parent() function on a jQuery collection, it will actually return a collection containing the parent of each of the elements in the original collection. If you then call addClass on that new collection, it will add a classname to each of those parents.
Most of jQuery's functions can be chained.

In addition my other answer, which uses CSS, let me offer an alternative solution.
Firstly; you want to keep track of which image goes with which radio button. Why not use an object literal?
var checkedImages = {
'radio1': "radio1_checked.png",
'radio2': "radio2_checked.png"
};
var uncheckedImage = "unchecked.png";
This way you can easily refer to the different URL's like, e.g.: checkedImages['radio2'].
The change event handler would look very similar. The only difference is what you do with the checkedLabels and the uncheckedLabels:
var radios = $('input:radio');
radios.change(function() {
var checkedLabels = radios.filter(':checked').parent();
var uncheckedLabels = radios.filter(':not(:checked)').parent();
uncheckedLabels.children('img').attr('src', uncheckedImage);
checkedLabels.each(function() {
var image = $(this).children('img');
var name = $(this).attr('for');
if (checkedImages[name] !== undefined) {
// We have checked image for this radio button, so set it:
image.attr('src', checkedImages[name]);
} else {
// We don't have checked image for this radio button.
image.attr('src', uncheckedImage);
}
});
});
The main differences:
We use children() to find the images.
We use each() to add more complicated logic for each of the unchecked label.
We check the selected <label>s for attribute (using .attr('for')) to find out which image we should apply.
In this example only the checked state has different images for the different radio's. If you need different unchecked images as well, you can easily apply the same principle.
Live example: http://jsbin.com/acalir/edit#javascript,html,live
P.S. don't forget to set the src to the unchecked images (in HTML), or do the following (in JS):
$('input:radio').change();
This fires the change event programmatically, which will cause the unchecked images to be applied.