Show and hide inputs depending on radio button angular 2 - javascript

I would like to show and hide addtional input fields depending on a radio button value.
Radio
<div class="form-group">
<label>Was möchten Sie bewerten?</label>
<div class="radio">
<label><input type="radio" [(ngModel)]="type" name="type" value="ETW">Eigentumswohnung</label>
</div>
<div class="radio">
<label><input type="radio" [(ngModel)]="type" name="type" value= "EFH">Einfamilienhaus</label>
</div>
<div class="radio">
<label><input type="radio" [(ngModel)]="type" name="type" value="ZFH">Mehrfamilienhaus</label>
</div>
</div
This form/elemnt I would like to show if the value of type is "EFH" or "ZFH"
<div *ngIf="" class="form-group">

As your radio buttons are binded to some property using ngModel, you can use your radio buttons model property to check (show/hide) the div's.
Example :
<div *ngIf="type == 'EFG' || type == 'ZFH'" class="form-group">

Related

Setting a default value for radio button inside foreach loop- MVC

Every items have different radio button values. But it showing the last radio button checked for every record.
I have put "checked" and checked="checked" in input field but it showing me the only last radio button checked for each record
<div class="radio input-group col-lg-12">
<span class="input-group-addon"><span class="glyphicon glyphicon-triangle-bottom"></span> Select Tour Guide:</span>
#foreach (var item in (List<SelectListItem>)ViewBag.TourGuides)
{
<label style="padding-right:50px"><input name="TourGuideId" type="radio" value="#item.Value" checked="checked" /> #item.Text </label>
}
</div>
I want to get different radio button checked for different records which I have define in database
<div class="radio input-group col-lg-12">
<span class="input-group-addon"><span class="glyphicon glyphicon-triangle-bottom"></span> Select Tour Guide:</span>
#foreach (var item in (List<SelectListItem>)ViewBag.TourGuides)
{
<label style="padding-right:50px" for="#item.Value"><input name="TourGuideId" id="#item.Value" type="radio" value="#item.Value" checked="checked" /> #item.Text </label>
}
</div>
Try this code in which add id in input field and add for in label.
checked is a boolean, so you should just be able to pass checked as a prop when you want the radio button to be checked, or not include it at all when you don't.
<label style="padding-right:50px"><input name="TourGuideId" type="radio" value="#item.Value" /> unchecked </label>
<label style="padding-right:50px"><input name="TourGuideId" type="radio" value="#item.Value" checked /> checked </label>

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

How do i check a Radiobutton list

How do I check a radio button?? Here is the radio button list:
<div class="md-radio-list">
<label class="md-radio" id="#ch.AnswerId">
<input name="#ch.QuestionId" onclick="handlesClick(this);" id="#id" type="radio">
<span></span>
<label for="#id">
<span class="inc"></span>
<span class="check"></span>
<span class="box"></span> #ch.AnswerText
</label>
</label>
</div>
Here the radio buttons are dynamic, They will bind to the radio button list.
I have tried :
<input name="#ch.QuestionId" checked="checked" onclick="handlesClick(this);" id="#id" type="radio">
But it's not working.
Use below to check without any event (click)
document.getElementById("#id").checked=true
Snippet
document.getElementById("#id").checked = true
<div class="md-radio-list">
<label class="md-radio" id="#ch.AnswerId">
<input name="#ch.QuestionId" onclick="handlesClick(this);" id="#id" type="radio">
<span></span>
<label for="#id">
<span class="inc"></span>
<span class="box"></span>
#ch.AnswerText</label>
</label>
</div>
HTML Solution:
Simply add checked attribute in your element
<input name="#ch.QuestionId" onclick="handlesClick(this);" id="#id" type="radio" checked>
$('input[type="radio"]').attr("checked", true); //this will check all radio buttons
$('#id').attr("checked", true); //this will check specific radio

ng-link is not working with radio buttons

I am trying to change content using radio buttons. content changes when click on radio button but radio is not checked it stays empty, i know something is wrong, can someone suggest me a solution.
<div class="radio-custom radio-default radio-inline">
<input type="radio" ng-link="['OneWayFlight']" id="oneWayFlight" name="FlightType" />
<label for="oneWayFlight">One way</label>
</div>
<div class="radio-custom radio-default radio-inline">
<input type="radio" ng-link="['ReturnTripFlight']" id="roundTripFlight" name="FlightType"/>
<label for="roundTripFlight">Round Trip</label>
You can use ng-model instead of ng-link.
<div class="radio-custom radio-default radio-inline">
<input type="radio" ng-model="flightType" value="Round Trip">Round trip<br/>
<input type="radio" ng-model="flightType" value="One Way">One Way<br/>
<tt>Flight Type = {{flightType | json}}</tt><br/>
</div>

How do you show/hide a div with Javascript?

I'm trying to use javascript to show/hide a div's content depending on which radio button is selected. I have an onchange function that I use to change the the div content from one div to another, but it doesn't work. If you can do this in jquery instead thats ok but im not that familiar with jquery so if you could update my jsfiddle with it I would be appreciativw :) Here is the JSFiddle: https://jsfiddle.net/markusbond/au77Ladg/
Any help is appreciated :)
JAVASCRIPT:
function changeSelection() {
if (document.getElementById("selectionTables").checked) {
document.getElementById("populateCheckBoxes").show;
document.getElementById("unpopulateCheckBoxes").hidden;
} else {
document.getElementById("unpopulateCheckBoxes").show;
document.getElementById("populateCheckBoxes").hidden;
}
}
HTML:
<form role="form">
<div class="row">
<!--this is the onchange call-->
<div class="radio col-xs-2" id="populateSelection" onchange="changeSelection()">
<!--this is the first radio button-->
<label>
<input type="radio" name="optradio" id="selectionTables" />Use Tables
</label>
<!--this is the second radio button-->
<label>
<input type="radio" name="optradio" id="selectionViews" />Use Views
</label>
</div>
<!--this is the first changed div-->
</div>
<div class="row" id="populateCheckBoxes">
<div class="checkbox">
<label>
<input type="checkbox" id="selectionCondition" />Condition
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="selectionDistribution" />Distribution
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="selectionProgram" />Program
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="selectionTreatment" />Treatment
</label>
</div>
</div>
<!--this is the second changed div-->
<div class="row" id="unpopulateCheckBoxes"></div>
</form>
Example using JQuery FIDDLE
JavaScript
$('input:radio[name=optradio]').change(
function(){
if (this.value == 'selectionTables') {
$("#unpopulateCheckBoxes" ).hide();
$("#populateCheckBoxes").show();
}
else {
$("#unpopulateCheckBoxes" ).show();
$("#populateCheckBoxes").hide();
}
}
);
Give your first radio button a value value="selectionTables"
<!--this is the first radio button-->
<label>
<input type="radio" name="optradio" id="selectionTables" value="selectionTables" />Use Tables
</label>
I hope I understood you correctly.
This is the correct way
<script>
function changeSelection() {
if (document.getElementById("selectionTables").checked) {
document.getElementById("populateCheckBoxes").style.visibility = "hidden";
document.getElementById("unpopulateCheckBoxes").style.visibility = "visible";
} else {
document.getElementById("unpopulateCheckBoxes").style.visibility ="hidden";
document.getElementById("populateCheckBoxes").style.visibility = "visible";
}
}
</script>
You are using
document.getElementById("unpopulateCheckBoxes").hidden;
but you should
document.getElementById("populateCheckBoxes").style.visibility = "hidden";
Hope this helps
or via jquery, thats what i would prefer:
function changeSelection() {
if ($("#selectionTables").attr("checked") {
$("#populateCheckBoxes").show();
$("#unpopulateCheckBoxes").hide();
} else {
$("#unpopulateCheckBoxes").show();
$("#populateCheckBoxes").hide();
}
}
document.getElementById('myElementID').style.display = 'none'; // Will hide an element
document.getElementById('myElementID').style.display = 'block'; // Will show an element
It is worth noting that you will not always want your element to be display:block;. There are many display options and you probably want to toggle back and forth based on how your element was originally shown.
Problem is html does not supports show/hide attribute. Try using style attribute with display property. Also use checked attribute to make default radio selection.
<input type="radio" name="optradio" id="selectionTables" checked='' />
function changeSelection() {
var pop = "none",
upop = "block";
if (document.getElementById("selectionTables").checked) {
pop = "block";
upop = "none";
}
document.getElementById("unpopulateCheckBoxes").style.display = upop;
document.getElementById("populateCheckBoxes").style.display = pop;
}
<form role="form">
<div class="row">
<!--this is the onchange call-->
<div class="radio col-xs-2" id="populateSelection" onchange="changeSelection()">
<!--this is the first radio button-->
<label>
<input type="radio" name="optradio" id="selectionTables" checked='' />Use Tables
</label>
<!--this is the second radio button-->
<label>
<input type="radio" name="optradio" id="selectionViews" />Use Views
</label>
</div>
<!--this is the first changed div-->
</div>
<div class="row" id="populateCheckBoxes">
<div class="checkbox">
<label>
<input type="checkbox" id="selectionCondition" />Condition
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="selectionDistribution" />Distribution
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="selectionProgram" />Program
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="selectionTreatment" />Treatment
</label>
</div>
</div>
<!--this is the second changed div-->
<div class="row" id="unpopulateCheckBoxes"></div>
</form>

Categories

Resources