Develop Reference

Given two yes/no fields, how can I use JavaScript to make the field 2 value checked "Yes" whenever the field 1 value is checked "Yes"?

If Field 1 is checked "Yes" then Field 2 should be checked "Yes"
This is what I've been trying so far:
Field 1:
<div class="entire">
<div class="col3"><label class="label-right">||FIELDTAG Field1||Question15||ENDFIELDTAG|| </label></div>
<div class="col9"><input type="radio" name="Field1" id="Question15yes" value="Yes" onclick="Check()">Yes <input type="radio" name="Field1" value="No" onclick="Check()">No</div>
Field 2:
<div class="entire">
<div class="col3"><label class="label-right">||FIELDTAG Field2||Question16||ENDFIELDTAG|| </label></div>
<div class="col9"><input type="radio" name="Field2" id="Question16yes" value="Yes" onclick="Check()">Yes <input type="radio" name="Field2" value="No" onclick="Check()">No</div>
I was trying something as simple as this js below, but I'm definitely missing something. Any help would be greatly appreciated!
<script language="JavaScript">
function Check() {
$("#Question15yes").click(function(){
if ($(this).is(':checked'))
{
$("#Question16yes").val("Yes");
}
}
});
}
</script>

Make sure you are including JQuery in your page.
To bind your event, you need to wait that the DOM is fully loaded, else you would try to use an element that doesn't exist yet.
<script language="JavaScript">
$(function() {
$(".question-checkbox").click(function(){
if ($(this).is(':checked'))
{
console.log($(this));
}
});
});
</script>
Also, you might want to change the JQuery selector from ID to class, so that you can use the same code for all similar checkboxes.
Put a .question-checkbox class on the inputs, and remove all onclicks.

You don't have to call check on every click. Once document loads, call it once.
window.addEventListener("load", function(){
$("input[type='radio']").on("click", function(){
if($("#Question15yes").is(':checked'))
$("#Question16yes").prop("checked", true);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="entire">
<div class="col3">
<label class="label-right">||FIELDTAG Field1||Question15||ENDFIELDTAG|| </label>
</div>
<div class="col9">
<input type="radio" name="Field1" id="Question15yes" value="Yes">
Yes
<input type="radio" name="Field1" value="No" >No
</div>
<div class="entire">
<div class="col3">
<label class="label-right">||FIELDTAG Field2||Question16||ENDFIELDTAG|| </label>
</div>
<div class="col9">
<input type="radio" name="Field2" id="Question16yes" value="Yes">
Yes
<input type="radio" name="Field2" value="No">
No
</div>

Use this for a single checkbox with the class name "example":
$('input.example').on('change', function() {
$('input.example').not(this).prop('checked', false);
});

How to find which radio Button is selected after a div

How can I find which radio button is selected after a precise div?
This is an Example:
<div class="largelines">
<p class="line">OPTION 1</p>
<div class="delete">
</div>
<fieldset>
<input type="radio" id="option1" name="option1" value="option1"><label for="option1">option1 </label><br>
<input type="radio" id="option2" name="option2" value="option2"><label for="option2">option2 </label>
</fieldset>
</div>
Here, when I click on the class .delete I would like to check (with jQuery) if one of the radio button below (inside the fieldset) has been selected. Do you have any hints?
Thanks in advance.

If there is just bunch of radio button you would like to check are checked or not you can do something like this
$(document).ready(function(){
$('.delete').on('click', function(){
$(document).find('input[type=radio]').each(function(){
if($(this).get(0).checked){
//do something
}
});
});
});
Ofc in line 3 you can specify more about the radio button location. For exp $(document).find('.largelines input[type=radio]') "OR" if you need to find radio butons based on delete button you can modify the code like this:
$(document).ready(function(){
$('.delete').on('click', function(){
var $parent = $(this).parents('.largelines');
$parent.find('input[type=radio]').each(function(){
if($(this).get(0).checked){
//do something
}
});
});
});
There is bunch of other ways to do that, another one is using next() or siblings() function:
$(document).ready(function(){
$('.delete').on('click', function(){
var $fieldset= $(this).next('fieldset');
//var $fieldset= $(this).siblings('fieldset');// i comment this out [its alternative way]
$fieldset.find('input[type=radio]').each(function(){
if($(this).get(0).checked){
//do something
}
});
});
});

This find only checked radio under .largelines scope of clicked .delete element.
$(function () {
$(document).on('click', '.delete', function () {
var isChecked = $('input:radio:checked', $(this).parent()).length > 0
alert(isChecked)
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="largelines">
<p class="line">OPTION 1</p>
<div class="delete">
Check 1
</div>
<fieldset>
<input type="radio" id="option1" name="option1" value="option1"><label for="option1">option1 </label><br>
<input type="radio" id="option2" name="option2" value="option2"><label for="option2">option2 </label>
</fieldset>
</div>
<hr>
<div class="largelines">
<p class="line">OPTION 2</p>
<div class="delete">
Check 2
</div>
<fieldset>
<input type="radio" id="option21" name="option1" value="option1"><label for="option1">option1 </label><br>
<input type="radio" id="option22" name="option2" value="option2"><label for="option2">option2 </label>
</fieldset>
</div>

Using .parent to select divs

I have a script which greys out a text area whenever the yes radio button is selected. I would like to modify the jquery script so that the textarea can be in a different div and still be disabled as before.
Looking through the jquery docs it looks to me I can do this using .parent but I'm having trouble getting it to work.
<div class="group">
<input type="radio" name="choice2" value="yes" />Yes
<input type="radio" name="choice2" value="no" />No
</div>
<div class="group">
<textarea rows="4" cols="20"></textarea>
</div>
How can I do this? Or is there a better way?
Edit:
$(function () {
var $choices = $(".group").find(":radio");
$choices.on("change", function () {
var $this = $(this);
var tarea = $this.closest(".group").next(".group").find("textarea");
if ($this.val() === "yes") {
tarea.val('');
tarea.prop('readonly', true);
tarea.css('background-color', '#EBEBE4');
} else {
tarea.prop('readonly', false);
tarea.css('background-color', '#FFFFFF');
}
});
});

Added to each <textarea> the attribute "trigger". Determinates it's trigger element by name. For example <textarea data-trigger="choice2"> means <input name="choice2"/> change's it's stare (gray/or not).
This way you can add your textarea elements anywhere inside your page without worries.
Here is an example: http://jsfiddle.net/r0gw8t1b/2/

var tarea = $this.closest(".group").next(".group").find("textarea");
You can use next() to achieve that. It finds the parent group and then looks at immediate sibling and looks for textarea.
<div class="group">
<input type="radio" name="choice1" value="yes" />Yes
<input type="radio" name="choice1" value="no" />No
</div>
<div class="group">
<textarea rows="4" cols="20"></textarea>
</div>
DEMO

This jsFiddle shows how it could be done.
$($(this).parent().siblings('div.group')[0]).find('textarea');
Find the text area inside the parents siblings of type div.group, and then you can set the css or whichever attributes you want to set as seen in the jsFiddle.

The below code works well for the selection and disabling the desired text area:
HTML:
<div class="group">
<input type="radio" name="choice2" value="yes" />Yes
<input type="radio" name="choice2" value="no" />No
</div>
<div class="group">
<textarea rows="4" cols="20"></textarea>
</div>
JQUERY:
$(function () {
$( "input[type='radio']" ).click(function () {
if ($(this).val()=='yes') {
$('.group textarea').attr('readonly',true);
$('.group textarea').css('background-color', '#f1f1f1');
} else {
$('.group textarea').attr('readonly',false);
$('.group textarea').css('background-color', '#fff');
}
});
});

Hide/show textboxes with jQuery based on radio button selection

I need for certain textboxes to show up when a certain radio button is clicked on my form, otherwise the textboxes should remain hidden. Here's an example of what I have:
HTML:
Radio buttons:
<p>Show textboxes<input type="radio" name="radio1" value="Show" onClick="getResults()">Do nothing<input type="radio" name="radio1" value="Nothing"></p>
Textboxes:
<div class="text"><p>Textbox #1 <input type="text" name="text1" id="text1" maxlength="30"></p></div>
<div class="text"><p>Textbox #2 <input type="text" name="text2" id="text2" maxlength="30"></p></div>
jQuery:
$(document).ready(function() {
$(".text").hide()
function getResults() {
$(".text").show()
};
});
Fiddle
When I take out the .show() code, the textboxes stay hidden. I need to show them when a radio button with the onClick event gets selected. Any help would be much appreciated.

JSFIDDLE
Javascript
$(document).ready(function () {
$(".text").hide();
$("#r1").click(function () {
$(".text").show();
});
$("#r2").click(function () {
$(".text").hide();
});
});
Html
<p>Show textboxes
<input type="radio" name="radio1" id="r1" value="Show">Do nothing
<input type="radio" name="radio1" id="r2" value="Nothing">
</p>Wonderful textboxes:
<div class="text">
<p>Textbox #1
<input type="text" name="text1" id="text1" maxlength="30">
</p>
</div>
<div class="text">
<p>Textbox #2
<input type="text" name="text2" id="text2" maxlength="30">
</p>
</div>

Instead of inline onclick() javascript, you can use .click():
$(document).ready(function () {
$(".text").hide();
$('input[type="radio"]').eq(0).click(function() {
$(".text").show()
});
});
Updated Fiddle
However, you should use .change() event for the input elements:
$(document).ready(function () {
$(".text").hide();
$('input[type="radio"]').eq(0).change(function() {
$(".text").show()
});
});
Updated Fiddle

You can use this code :
$(document).ready(function() {
$(".text").hide()
$('[name=radio1]').on('change', function(){
$('.text').toggle(this.value === 'Show');
})
});
Inline event are not recomanded, so bind a change event the the radio and if the value is Show, well show it!
http://jsfiddle.net/tT48f/3/

Currently you can pass the clicked object as this in form of parameter to getResults(), Where this refers to the current clicked object
See below
Script
$(document).ready(function() {
$(".text").hide()
});
function getResults(elem) {
elem.checked && elem.value == "Show" ? $(".text").show() : $(".text").hide();
};
HTML
<input type="radio" name="radio1" value="Show" onClick="getResults(this)">
Do nothing ^^^^
<input type="radio" name="radio1" value="Nothing" onclick="getResults(this)">
^^^^
Fiddle --> http://jsfiddle.net/tT48f/7/

Redefine a little bit your HTML markup and then you could only use CSS:
DEMO jsFiddle
input[value=Nothing]:checked ~ .text{
display: none;
}

Check this demo jsFiddle
jQuery
$(document).ready(function() {
$(".text").hide()
$('[name=radio1]').on('change', function(){
$('.text').toggle(this.value === 'Show');
})
});

Try like:
$(document).ready(function() {
$(".text").hide();
});
function getResults() {
$(".text").show();
};

1. $("input[name='Radio1']").change(function(){
if($(this).val()=="Ya") {
$("#QUESTION_1").fadeIn(250);
}
else {
$("#QUESTION_1").fadeOut(250);
} });

<div class="RdoClick">
<asp:RadioButton ID="RadioSugges" runat="server" GroupName="PopupRadio" Text=" C. Insert your suggestion:" />
</div>
<asp:TextBox ID="TextBox1" runat="server" class="PopupTxtBox" PlaceHolder="Enter your suggestion..."
onClick="check();" TabIndex="1" />
<script type="text/javascript">
function check() {
document.getElementById('<%=RadioSugges.ClientID%>').checked = true;
}
</script>

JQuery slidedown() slideup() when radiobutton is clicked

I am very new to Javascript, and can't seem to find the information I'm looking for.
I'm trying to make another div slide down when the "Yes" radio button is clicked, and slide back up when "No" is clicked. However, nothing is happening when I click either one. This is my current code:
HTML:
<div class="field">
<label for="">Apprentice</label>
<div class="topRadio">
<input name="apprentice" group="apprentice" type="radio" value="Yes" onclick="dropbcitdown()">
<label for="">Yes</label>
<input name="apprentice" group="apprentice" type="radio" value="No" onclick="pickbcitup()">
<label for="">No</label>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<div class="field slidingdiv" id="doyouattend">
<label for="">Do you attend BCIT?</label>
<div class="topRadio">
<input name="bcit" group="bcit" type="radio" value="Yes" onclick="droptransportationdown()">
<label for="">Yes</label>
<input name="bcit" group="bcit" type="radio" value="No" onclick="picktransportationup()">
<label for="">No</label>
<div class="clear"></div>
</div>
<div class ="clear"></div>
</div>
<div class="field slidingdiv" id="doyouneed">
<label for="">Do you need ground transportation to city hall?</label>
<div class="topRadio">
<input name="transportation" group="transportation" type="radio" value="Yes">
<label for="">Yes</label>
<input name="transportation" group="transportation" type="radio" value="No">
<label for="">No</label>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
Javascript
<script>
function bcitDown() {
$("#doyouattend").slideDown("slow" function() {
$(this).css({
display: "inline";
})
})
}
function bcitUp() {
$("#doyouattend").slideUp("slow" function() {
$(this).css({
display: "none";
})
})
}
function transportationDown() {
$("#doyouneed").slideDown("slow" function() {
$(this).css({
display: "inline";
})
})
}
function transportationUp() {
$("#doyouneed").slideUp("slow" function() {
$(this).css({
display: "none";
})
})
}
</script>
I have also tried doing it with the values of the radiobuttons, but I can't submit the for before they drop down. Unrelated, but the '' making a line break if anyone is wondering why that's happening. I have tried running this without that, and haven't had a different outcome.
If I am making a glaring syntax error, or this ends up being some obvious solution that I totally missed, I'm sorry. I just feel that I've tried everything.
NOTE: I have included JQuery.

First add Jquery library
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
After try this:
<script>
$(document).ready(function(){
$('input[name=apprentice]').click(function(){
if ($(this).val() == 'yes')
{
$("#yourdiv").slideDown('slow');
}
else
{
$("#yourdiv").slideUp('slow');
}
});
}):
</script>

You can apply jquery functions only to jquery objects. By selecting with getElementById() you get the DOM object but no the Jquery Object. That is why you use $(this) inside the function to change the css.
I would recommend using:
function dropbcitdown() {
$("#doyouattend").slideDown("slow" function() {
$(this).css({
display: "inline";
})
})
}