We Keep Coding

Radio button show/hide elements in HTML using javascript function

When checkbox is checked it enables the radio buttons.
when the first radio button is selected it shows the hidden paragraph, but when the other radio button is selected the paragraph from the first radio button should be hidden(style.display='none') and the other paragraph for the second radio button should be shown.
https://jsfiddle.net/stevandrej/q3j9a2sj/2/ line 19 - 31

I introduces some changes :
added one common class to all needed P
HTML -
<p class="radio1 common-class" style="display:none">show me if radio1</p>
<p class="radio2 common-class" style="display:none">show me if radio2</p>
JS -
var arrP = document.getElementsByClassName("common-class");
var intLength = arrP.length;
for(var k=0;k<intLength ;k++){
arrP[k].style.display = 'none';
}
Here is the updated Fiddle

I recommend you that uses jQuery or event listeners by other way. With your code, you iterate by all fields in every click. You can achieve that you want with jquery in few lines.
Now, you are only checking one element, if you check radio you listen only that element and is the only that respond.
With jquery:
$('.checkbox-classname').on('change', function() {
alert($(this).attr('id')); // alerts you with the id of the checkbox are checked
});

Setting radio button checked true on button click

I have a table cell that lights up when selected. There will be many buttons on the page but only one choice can be made at a time. How can I make them mutually exclusive using hidden input radio tags? (in order to handle the group later)
<td class="choice-option">
<input type="radio" name="trainChoice" id="cheese0032" >
<p>10€</p>
</td>
<td class="choice-option">
<input type="radio" name="trainChoice" id="cheese0033" >
<p>7€</p>
</td>
For the input tag I was thinking of putting an onclick event on the td like:
onclick="checked()==true;"
Also I was thinking an onclick for the and send it to a .js with a function to switch the radio button to true.
When the button is clicked the radio button doesn't toggle to true. How do I make it do that?
Any advice would help greatly, thanks in advance!

Here is an example : http://jsfiddle.net/xhhLja7m/
$(".choice-option").click(function()
{
$(this).find('input[type=radio]').prop("checked", "true");
})

The radio button isn't necessarily required to achieve this. You might apply a class name (e.g. 'selected') to a td when it is clicked and remove this class from all td's at the same time. In this way you get the effect of one td being selected at any time. In jQuery:
$('.choice-option').click(function() {
$('.selected').removeClass('selected');
$(this).addClass('selected');
}
Where you will apply your selected styles with CSS to the class of 'selected'.
Edit: However, to use the radio buttons as you would like to then you could do this:
$('.choice-option').click(function() {
$(this).find("input[name='trainChoice']").prop('checked', true);
}

Jquery get Checkbox in span

I have some jquery code where I am trying to select a checkbox when the user clicks on a div. My fiddle is below:
http://jsfiddle.net/5PpsJ/
What i have come up with is this, but it is not selecting the checkbox inside of the span:
$('span[name="' + current + '"]').closest('input:checkbox[id="CB_Selected"]').prop('checked', true);
The full code is in the link
My question is how can i get the select box inside of the span based on its unique name and select it?
n.b I have commented out the hide functio0n in jquery to visually see whether the checkbox is selected or not
EDIT
My ID's are the same because I am working inside of ASP.NET and using a repeater to create the HTML shown in the fiddle. Inside of Repeaters I can not set the ID of item as the Repeater control does not allow me to set the ID with Eval(datasource)

IDs are unique. All you need is this:
$("#CB_Selected").prop('checked', true);
Actually, you don't even need jQuery:
document.getElementByID('CB_Selected').checked = true;
As others have pointed out, it would be preferred to use a class rather than an ID if there are multiple checkboxes. In addition, an input cannot have children, so the closest function won't work; did you mean find (for children) or siblings?

Instead of giving several checkboxes the same ID -- which invalidates your html -- use a class on the checkboxes. Change:
<input id="CB_Selected" type="checkbox" name="ctl00$ContentPlaceHolder_Content_Wraper$ctl01$Repeater_Selected$ctl00$CB_Selected" />
To:
<input class="CB_Selected" type="checkbox" name="ctl00$ContentPlaceHolder_Content_Wraper$ctl01$Repeater_Selected$ctl00$CB_Selected" />
Then you can use the code:
$('#s_' + this.id).find(':checkbox.CB_Selected').prop('checked', true);

JQuery, Show / hide a div based on dynamic radio buttons aka radio34 etc?

I'm producing a page dynamically and I have several sets of radio buttons. I need to use the record id in the id tag of the radio buttons. e.g.
<input type="radio" name="review_flag1797" id="review_flag1797"
value="n" checked="checked" />
How can I produce a single JQuery function to handle showing / hiding of my div. My radio buttons will have three values y, n and r. When the value is n I need to hide my div and show it for y and r.
To further complicate this, the radio of the radio button can set to a different value when its written.
EDIT
<div id="my_content1797">
content
</div>

I suggest you use a data-* attribute to store the ID of the set, just to make life a bit easier, maybe also give those radio buttons a common class:
<input ... class="someClass" ... data-id="1797" ... />
Then all you have to do is:
$('.someClass').change(function() {
if(this.checked) {
$('#my_content' + $(this).data('id')).toggle(this.value !== 'n');
}
});

I believe you want the jQuery toggle() method.
http://api.jquery.com/toggle/
onclick="$('#my_content<%=record_id%>').toggle(this.checked);"

You can hide the parent div using this statement
$("input[value='n']").parent().hide();
To show, give
$("input[value!='n']").parent().show();
You have to give this after the statements that add radio buttons dynamically, and also in the change handler of radio inputs. You can put these statements in a function and invoke it.
Also try http://api.jquery.com/closest/ if the div is not parent. This also selects parent.
$("input[value='n']").closest(...).hide();

jQuery and If statement to de-select radio buttons

Well, I'm stuck and have been banging my head for a little while now to try to figure what I'm doing wrong.
Scenario:
I have a question with a Yes/No answer (ie 2 radio buttons). When a user selects the either Yes or No, I call a function to .toggle() a hidden div to show a link. That works great. And if they go back and check that Yes/No again it disappears again due to the .toggle()
My issue is that if a user clicks the No (and the link is shown) but then clicks the Yes I want the link that is showing due to the No result to disappear and vice-versa.
So basically only show 1 link at a time.
I figured that maybe an If statement would work but I can't seem to get it right.
My code:
<div id="Question1">
<div>Do you kazoo?</div>
<input type="radio" ID="Q1RB1" runat="server" value="Yes" text="Yes" name="RadioGroup1"/>Yes<br />
<input type="radio" ID="Q1RB2" runat="server" value="No" text="No" name="RadioGroup1"/> No
<span id="Q1RB1Results" style="display:none"> <a href=#>Click here</a></span>
<span id="Q1RB2Results" style="display:none"> <a href=#>Click here</a></span>
</div>
My jQuery code that works for each individual radio button:
$("input[id$=Q1RB1]:radio").change(function () {
$("[id$=Q1RB1Results]").toggle();
});
$("input[id$=Q1RB2]:radio").change(function () {
$("[id$=Q1RB2Results]").toggle();
});
This is the If statement I'm trying to get to work. Amy I going about this the wrong way?
if ($("input[id$=Q1RB2]").is(":checked")) {
$("input[id$=Q1RB2]:radio").change(function () {
$("[id$=Q1RB2Results]").toggle();
});
});
Thanks for any thoughts/advice. I've tried a multitude of answers here in Stackoverflow and the 'net but can't seem to figure out what I'm doing wrong. :(
~V
Update: I put a sample form and the dialogue up on JSFiddle. http://jsfiddle.net/Valien/7uN6z/4/ I tried some of the solutions mentioned here and couldn't get them working so not sure what I'm doing wrong.

When you register an event listener in JQuery (.change, .click, .blur, etc.), the Javascript engine matches the selector and applies them at that point. With that in mind, you can rearrange your code (which is close to being right) to this, which should do the trick:
/* The function you're about to define applies to all radio button
inputs whose ID ends with Q1RB2 */
$("input[id$=Q1RB2]:radio").change(function()
{
/* Inside the change function, $(this) refers to the instance that
was changed. So, this checks to see if the instance that was just
changed is currently checked, after being changed. */
if ($(this).is(":checked"))
{
// If that was the case, then toggle the item
$("[id$=Q1RB2Results]").toggle();
}
});

Try this:
$('input:radio[name=RadioGroup1]').change(function(){
var show = "#" + $(this).attr('id') + 'Results';
$('#Question1 span').hide();
$(show).show();
});

I believe this is what you need:
// declare common variables so it's easier to target
var question = $("#Question1"),
group = question.find("input[name='RadioGroup1']"),
span = question.find("span");
// change listener for each radio button group
group.click(function(){
var id = $(this).attr("id"); // get the radio button id for reference
span.each(function(){ // loop through each span and check which one to hide/show
var item = $(this);
if (item.attr("id")===id+"Results") { item.show(); } else { item.hide(); }
});
});