Develop Reference

Get radio button label from different radio button groups and append to division

There are 3 radio button groups for user to select.
Division '#targetOption' will get whenever the user checked radio button label to be displayed. Below my code which is able to get the first checked radio button.
Example if user click on the first radio button group, #targetOption will show A. Then if user click on the second radio button group, #targetOption will show A B.
<div id="options">
<div class="form-group required">
<div class="radio">
<label> <input type="radio" value="a">
A
</label>
</div>
<div class="radio">
<label> <input type="radio" value="b">
B
</label>
</div>
<div class="radio">
<label> <input type="radio" value="c">
C
</label>
</div>
</div>
<div class="form-group required">
<div class="radio">
<label> <input type="radio" value="d">
D
</label>
</div>
<div class="radio">
<label> <input type="radio" value="e">
E
</label>
</div>
<div class="radio">
<label> <input type="radio" value="f">
F
</label>
</div>
</div>
<div class="form-group required">
<div class="radio">
<label> <input type="radio" value="g">
G
</label>
</div>
<div class="radio">
<label> <input type="radio" value="h">
H
</label>
</div>
<div class="radio">
<label> <input type="radio" value="i">
I
</label>
</div>
</div>
</div>
<div id="targetID"></div>
$('#options').click(function() {
$('#targetID').html('');
$("input[type='radio']:checked").each(function() {
var optiontext = $(this).parent().text();
console.log(optiontext);
$('#targetID').html(optiontext);
});
});

$('#targetID').html(optiontext); set #targetID to the current radio value in the loop instead of appending it to #targetID.
Use $('#targetID').html($('#targetID').html() + optiontext); instead.
Or you can create an array to store the checked values and update #targetID later

Hiding a form with javascript - Not defined

I'm trying to hide two fields on my form depending on the selection of the use on the radio field. This is the field HTML:
function show1() {
document.getElementByClass('extra').style.display = 'none';
}
function show2() {
document.getElementByClass('extra').style.display = 'block';
}
<div class="form-radio">
<div class="radio">
<label>
<input type="radio" name="radio" onclick="show1();" /><i class="helper"></i>
I can come
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="radio" onclick="show2();" /><i class="helper"></i>
I cant come
</label>
</div>
</div>
<div class="form-group extra">
<input type="text" required="required" />
<label class="control-label" for="input">Dietary Requirements</label>
<i class="bar"></i>
</div>
<div class="form-group extra">
<input type="text" required="required" />
<label class="control-label" for="input">What song would you like played?</label>
<i class="bar"></i>
</div>
It should work by hiding the dietary requirements and what song fields when the user selects "I can't come" on the radio field. I get the following result:
Uncaught ReferenceError: show2 is not defined
at HTMLInputElement.onclick ((index):627)

Your code fails for two reasons:
There is no method of document called getElementByClass. The correct method to use is getElementsByClassName.
The methodgetElementsByClassName returns an HTMLCollection and not a single element, so setting style.display for the HTMLCollection won't have the desired effect, because you are not setting it for each individual element of it, but rather for the HTMLCollection object itself.
The correct code is:
function show() {
/* Cache the collection. */
var extra = document.getElementsByClassName('extra');
/* Iterate over every element in the collection. */
[].forEach.call(extra, function (element) {
element.style.display = 'block';
});
}
function hide() {
/* Cache the collection. */
var extra = document.getElementsByClassName('extra');
/* Iterate over every element in the collection. */
[].forEach.call(extra, function (element) {
element.style.display = 'none';
});
}
Snippet:
/* ----- JavaScript ----- */
function show() {
/* Cache the collection. */
var extra = document.getElementsByClassName('extra');
/* Iterate over every element in the collection. */
[].forEach.call(extra, function(element) {
element.style.display = 'block';
});
}
function hide() {
/* Cache the collection. */
var extra = document.getElementsByClassName('extra');
/* Iterate over every element in the collection. */
[].forEach.call(extra, function(element) {
element.style.display = 'none';
});
}
<!----- HTML ----->
<div class="form-radio">
<div class="radio">
<label>
<input type="radio" name="radio" onclick="show();" checked/>
<i class="helper"></i>
I can come
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="radio" onclick="hide();"/>
<i class="helper"></i>
I cant come
</label>
</div>
</div>
<div class="form-group extra">
<input type="text" required="required" />
<label class="control-label" for="input">Dietary Requirements</label>
<i class="bar"></i>
</div>
<div class="form-group extra">
<input type="text" required="required" />
<label class="control-label" for="input">What song would you like played?</label>
<i class="bar"></i>
</div>

you can use jQuery instead of javascript.
jQuery(document).ready(function($){
$('input:radio[name="radio"]').change(function(){
if($(this).val() == 'hide'){
$('.extra').hide();
}
else {
$('.extra').show();
}
});
});
<div class="form-radio">
<div class="radio">
<label>
<input type="radio" name="radio" value="show" /><i class="helper"></i>
I can come
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="radio" value="hide" /><i class="helper"></i>
I cant come
</label>
</div>
</div>
<div class="form-group extra">
<input type="text" required="required" />
<label class="control-label" for="input">Dietary Requirements</label>
<i class="bar"></i>
</div>
<div class="form-group extra">
<input type="text" required="required" />
<label class="control-label" for="input">What song would you like played?</label>
<i class="bar"></i>
</div>

jQuery - Check and uncheck the 2nd checkbox when first clicked using name attribute

I am trying to check the 2nd checkobx (Delete it!) automatically, when first one (Hide it) is clicked? System generated html doesn't contain any id or class for the checkbox elements. I tried to target the name attribute, but it failed every time.
jQuery(document).ready(function($){
$("input:checkbox[name='eddhd']").click(function() {
$(this).parents('.eddhrd::nth-child(2))').siblings("input:checkbox[name='eddhrd']").find('input:checkbox').attr("checked","checked");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset class="es-el eddhd">
<div class="es-label">
<label for="es-eddhd">Hide it</label>
<br>
</div>
<div class="es-fields">
<span data-required="no" data-type="radio"></span>
<label>
<input name="eddhd[]" value="Yes" type="checkbox"> Yes
</label>
</div>
</fieldset>
<fieldset class="es-el eddhrd">
<div class="es-label">
<label for="es-eddhrd">Delete it!</label>
<br>
</div>
<div class="es-fields">
<span data-required="no" data-type="radio"></span>
<label>
<input name="eddhrd[]" value="Yes" type="checkbox"> Yes
</label>
</div>
</fieldset>

You can use change function to check if checkbox is checked than check other checkbox otherwise uncheck it.
$("input:checkbox[name='eddhd[]']").change(function () {
if ($(this).is(":checked"))
$("input:checkbox[name='eddhrd[]']").attr("checked", "checked");
else
$("input:checkbox[name='eddhrd[]']").attr("checked", false);
});

Try following snippet.
$(document).ready(function($){
$("input[name='eddhd[]']").change(function() {
$("input[name='eddhrd[]']").prop("checked", $(this).is(":checked"));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset class="es-el eddhd">
<div class="es-label">
<label for="es-eddhd">Hide it</label>
<br>
</div>
<div class="es-fields">
<span data-required="no" data-type="radio"></span>
<label>
<input name="eddhd[]" value="Yes" type="checkbox"> Yes
</label>
</div>
</fieldset>
<fieldset class="es-el eddhrd">
<div class="es-label">
<label for="es-eddhrd">Delete it!</label>
<br>
</div>
<div class="es-fields">
<span data-required="no" data-type="radio"></span>
<label>
<input name="eddhrd[]" value="Yes" type="checkbox"> Yes
</label>
</div>
</fieldset>

You need to traverse the DOM to find the checkbox from sibling of parent fieldset element then use .prop('property', value) to set the checked property.
$(document).ready(function($) {
$("input[name='eddhd[]']").change(function() {
$(this) //Referes to current element
.closest('.eddhd') //Target parent fieldset with eddhd class
.next('.eddhrd') //Target immediate sibling
.find("input[name='eddhrd[]']") //Find the checkbox
.prop("checked", this.checked); //set the checked property
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset class="es-el eddhd">
<div class="es-label">
<label for="es-eddhd">Hide it</label>
<br>
</div>
<div class="es-fields">
<span data-required="no" data-type="radio"></span>
<label>
<input name="eddhd[]" value="Yes" type="checkbox">Yes
</label>
</div>
</fieldset>
<fieldset class="es-el eddhrd">
<div class="es-label">
<label for="es-eddhrd">Delete it!</label>
<br>
</div>
<div class="es-fields">
<span data-required="no" data-type="radio"></span>
<label>
<input name="eddhrd[]" value="Yes" type="checkbox">Yes
</label>
</div>
</fieldset>

If I am right, you want to change the state of one checkbox on change on another checkbox. RIght?? Below is a sample code for checking 2nd checkbox on click of 1st checkbox.
$('.es-el.eddhd input[type=checkbox]').on('change', function() {
$('.es-el.eddhrd input[type=checkbox]').attr('checked', 'checked');
})

try this
$("input:checkbox[name='eddhd[]']").on("click",function(){
if($(this).prop("checked")){
$("input:checkbox[name='eddhrd[]']").prop("checked",true);
} else{
$("input:checkbox[name='eddhrd[]']").prop("checked",false);
}
});

Get value of checked radio button in jQuery

I have some questions with answers. I want to store the checked off answer in a variable. Each answer is as a radio button. For example:
<h4 class='ques1'>Question one here here</h4>
<div class="checkbox">
<label>
<input type="checkbox"> answer 1
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> answer 2
</label>
</div>
<h4 class='ques2'>Question two here here</h4>
<div class="checkbox">
<label>
<input type="checkbox"> answer 1
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> answer 2
</label>
</div>
Then I have variables set up to store the checked answer….
var ques1Answer, ques2Answer;
I'm not sure if you need to query the label tag or the input tag to get the value. But this is what I've tried:
$('h4.ques1 div.checkbox label input').on('change', function(){
ques1Answer = $(this).val();
});

First of your selector is wrong 'h4.ques1 div.checkbox label input'
the DIV is not a child of h4.ques1 so use:
$('div.checkbox label input')
if you use .val() that implies that actually you have an value attribute otherwise you'd better assign some name attributes:
<input type="checkbox" name="Question-A-1">
<input type="checkbox" name="Question-A-2">
so even if you get the "on" / "off" (default values) you'll always know what's the name entity those values are referring to.
Worth noting that if only one answer is possible-per-question than you might want to use Radio Buttons instead
<input type="radio" name="Question-A" value="1">
<input type="radio" name="Question-A" value="2">
in that case it makes sense to hold inside your vars only one value-per-question.
Than wrap all your questionnary inside a <form> and use .serialize() fo get all the answers:
$("button").click(function(){
alert( $("form#questionnary").serialize() );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="questionnary">
<h4 class='ques1'>Question one here</h4>
<div class="checkbox">
<label>
<input type="radio" name="Question-A" value="1"> answer 1
</label>
</div>
<div class="checkbox">
<label>
<input type="radio" name="Question-A" value="2"> answer 2
</label>
</div>
<h4 class='ques2'>Question two here</h4>
<div class="checkbox">
<label>
<input type="radio" name="Question-B" value="1"> answer 1
</label>
</div>
<div class="checkbox">
<label>
<input type="radio" name="Question-B" value="2"> answer 2
</label>
</div>
</form>
<button>TEST RESULTS</button>

how to show/hide a div on the basis of a checkbox selection in angular js

I have a checkbox and a div on my page.
<input type="checkbox" id="Animals" name="Animals" ng-model="ModelData.Animals"
ng-checked="ModelData.Animals == 'A'" />
<div class="form-group" ng-show="ModelData.Animals == 'A'">
<label for="FirstName" class="col-md-9">
Are you interested in Animal Liability Coverage?
</label>
<div class="col-md-3">
<label>
<input type="radio" id="AnimalLiabCovY" name="AnimalLiabilityCoverageRadio" ng-model="ModelData.AnimalLiabCov"
value="Y" />
Yes
<input type="radio" id="AnimalLiabCovN" name="AnimalLiabilityCoverageRadio" ng-model="ModelData.AnimalLiabCov"
value="N" />
No
</label>
</div>
</div>
I want to show the DIV when the checkbox is selected and hide when deselected. For the first time the above code workd fine ie when checkbox is selected and DIV hides on deselecting the checkbox. But after the first time its not working. It does not show the DIV after selecting the checkbox.

Have you tried it this way? Here's the fiddle It works great.
<input type="checkbox" id="Animals" name="Animals" ng-model="ModelData.Animals" />
<div class="form-group" ng-show="ModelData.Animals">
<label for="FirstName" class="col-md-9">
Are you interested in Animal Liability Coverage?
</label>
<div class="col-md-3">
<label>
<input type="radio" id="AnimalLiabCovY" name="AnimalLiabilityCoverageRadio" ng-model="ModelData.AnimalLiabCov" value="Y" /> Yes
<input type="radio" id="AnimalLiabCovN" name="AnimalLiabilityCoverageRadio" ng-model="ModelData.AnimalLiabCov" value="N" /> No
</label>
</div>
</div>

I think you are looking for ng-true-value and ng-false-value
<div ng-app>
<div >
<input type="checkbox" ng-true-value="A" ng-false-value="B" ng-model="check"/>
</div>
<div ng-show="check == 'A'">
Checked
</div>
</div>
Fiddle

<body ng-app>
<label>Wolf: <input type="checkbox" ng-model="Wolf" ng-init="checked=true" /></label><br/>
<label>Tiger: <input type="checkbox" ng-model="Tiger" ng-init="checked=false" /></label><br/>
<label>Lion: <input type="checkbox" ng-model="Lion" ng-init="checked=false" /></label><br/>
Show when checked:
<div ng-if="Wolf">
<span> This is removed when the wolf is checked.
</span>
</div>
<div ng-if="Tiger">
<span> This is removed when the tiger is checked.
</span>
</div>
<div ng-if="Lion">
<span> This is removed when the lion is checked.
</span>
</div>
</body>

Input type checkbox return true false in ng-model so i just use this. Its working
<div ng-app>
<div >
<input type="checkbox" ng-model="check"/>
</div>
<div ng-show="check == true">
Checked
</div>