I have a list of elements that, selected via a radio input, must output the [value]. The problem is that the select of choice of the value does not find me the secondary value when I go to change the select (always remains the value of prezzoRiepilogo instead of prezzoRiepilogoTwo, when i change). Why? How can I fix it?
<ul class="list-group">
<li class="list-group-item" *ngFor="let interventoStrutturale of interventi">
<td style="float: left;">{{interventoStrutturale.intervento.codice}} {{interventoStrutturale.variante}} - {{interventoStrutturale.intervento.descrizione}}<br>
<select [(ngModel)]="interventoStrutturale.tipo_sup">
<option disabled value="1">Selection one</option>
<option value="2">Selection two</option>
<option value="3">Selection three</option>
</select>
</td>
<td style="float: right;" [ngSwitch]="interventoStrutturale.tipo_sup">
<label class="form-check-inline" *ngSwitchCase="interventoStrutturale.tipo_sup == 2">
<input class="form-check-input" type="radio" name="radio"
[value]="interventoStrutturale.prezzoRiepilogo" (change)="onChangeIntervento($event.target.value)">
</label>
<label class="form-check-inline" *ngSwitchCase="interventoStrutturale.tipo_sup == 3">
<input class="form-check-input" type="radio" name="radio"
[value]="interventoStrutturale.prezzoRiepilogoTwo" (change)="onChangeIntervento($event.target.value)">
</label>
<label class="form-check-inline" *ngSwitchDefault>
<input class="form-check-input" type="radio" name="radio"
[value]="interventoStrutturale.prezzoRiepilogo" (change)="onChangeIntervento($event.target.value)">
</label>
</td>
</li>
</ul>
onChangeIntervento(intervento: number) {
this.prezzoStrutturale = intervento
this.elementoSelezionato = []
this.interventi.forEach(c => {
if(this.prezzoStrutturale == c.prezzoRiepilogo) {
this.elementoSelezionato.push(c)
}
if(this.prezzoStrutturale == c.prezzoRiepilogoTwo) {
this.elementoSelezionato.push(c)
}
})
}
I think you do not apply SwitchCase correctly. Try it this way:
<td style="float: right;" [ngSwitch]="interventoStrutturale.tipo_sup">
<label class="form-check-inline" *ngSwitchCase="2">
<input class="form-check-input" type="radio" name="radio"
[value]="interventoStrutturale.prezzoRiepilogo" (change)="onChangeIntervento($event.target.value)">
</label>
<label class="form-check-inline" *ngSwitchCase="3">
<input class="form-check-input" type="radio" name="radio"
[value]="interventoStrutturale.prezzoRiepilogoTwo" (change)="onChangeIntervento($event.target.value)">
</label>
<label class="form-check-inline" *ngSwitchDefault>
<input class="form-check-input" type="radio" name="radio"
[value]="interventoStrutturale.prezzoRiepilogo" (change)="onChangeIntervento($event.target.value)">
</label>
Related
<div class="product_colors">
<span class="header" style="display:block;">Color</span>
<label class="color_label active">
<input type="radio" name="product_color" value="gold" >Gold
<span style="""></span>
</label>
<label class="color_label">
<input type="radio" name="product_color" value="rose gold">Rose Gold
<span style="" data-title="rose gold"></span>
</label>
<label class="color_label">
<input type="radio" name="product_color" value="silver" > Silver
<span style="" data-title="silver"></span>
</label>
</div>
<div class="product_stones">
<span class="header" style="display:block;">Stone</span>
<label class="stone_label">
<input type="radio" name="product_stone" value="malachite" >malachite
</label>
<label class="stone_label active">
<input type="radio" name="product_stone" value="tiger-eye" > tiger-eye
</label>
<label class="stone_label">
<input type="radio" name="product_stone" value="black" > black
</label>
<label class="stone_label">
<input type="radio" name="product_stone" value="blue" > blue
</label>
</div>
<div class="combination">
Combination
<div class="hidden">
<input type="radio" name="combination" class="hidden_wrap" data-color="gold" data-stone="malachite" data-handle="joory-earring-malachite-gold"> gold-malachite
<input type="radio" name="combination" class="hidden_wrap" data-color="gold" data-stone="tiger-eye" data-handle="copy-of-joory-earrings-tiger-eye-gold">gold-tiger-eye
<input type="radio" name="combination" class="hidden_wrap" data-color="rose gold" data-stone="black" data-handle="kanz-ring-black-rose-gold"> rose-gold-black
<input type="radio" name="combination" class="hidden_wrap" data-color="silver" data-stone="blue" data-handle="joory-earring-blue-silver"> silver-blue
</div>
</div>
here is my output image
I want to change combination radio button value to be select automatically on the basis of selected color and stone. Can someone help me to get rid of this problem.
Here is my code I've tried everything but I am new in JS so I can't find solution of this problem
Color
Gold
Rose Gold
Silver
<div class="product_stones">
<span class="header" style="display:block;">Stone</span>
<label class="stone_label">
<input type="radio" name="product_stone" value="malachite" >malachite
</label>
<label class="stone_label active">
<input type="radio" name="product_stone" value="tiger-eye" > tiger-eye
</label>
<label class="stone_label">
<input type="radio" name="product_stone" value="black" > black
</label>
<label class="stone_label">
<input type="radio" name="product_stone" value="blue" > blue
</label>
</div>
<div class="combination">
Combination
<div class="hidden">
<input type="radio" name="combination" class="hidden_wrap" data-color="gold" data-stone="malachite" data-handle="joory-earring-malachite-gold"> gold-malachite
<input type="radio" name="combination" class="hidden_wrap" data-color="gold" data-stone="tiger-eye" data-handle="copy-of-joory-earrings-tiger-eye-gold">gold-tiger-eye
<input type="radio" name="combination" class="hidden_wrap" data-color="rose gold" data-stone="black" data-handle="kanz-ring-black-rose-gold"> rose-gold-black
<input type="radio" name="combination" class="hidden_wrap" data-color="silver" data-stone="blue" data-handle="joory-earring-blue-silver"> silver-blue
</div>
</div>
Here is another solution I've tried which is not edit HTML.
My solution is going to find combination radio button that has proper data-color and data-stone
$("input[name^='product_']").on('change', (e) => {
$("input[name='combination']").prop('checked', false);
var productColor = $("input[name='product_color']:checked").val();
var productStone = $("input[name='product_stone']:checked").val();
if (productColor !== undefined && productStone !== undefined) {
if ($(`input[data-color='${productColor}'][data-stone='${productStone}']`).length) {
$(`input[data-color='${productColor}'][data-stone='${productStone}']`).trigger('click');
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product_colors">
<span class="header" style="display:block;">Color</span>
<label class="color_label active">
<input type="radio" name="product_color" value="gold" >Gold
<span style="""></span>
</label>
<label class="color_label">
<input type="radio" name="product_color" value="rose gold">Rose Gold
<span style="" data-title="rose gold"></span>
</label>
<label class="color_label">
<input type="radio" name="product_color" value="silver" > Silver
<span style="" data-title="silver"></span>
</label>
</div>
<div class="product_stones">
<span class="header" style="display:block;">Stone</span>
<label class="stone_label">
<input type="radio" name="product_stone" value="malachite" >malachite
</label>
<label class="stone_label active">
<input type="radio" name="product_stone" value="tiger-eye" > tiger-eye
</label>
<label class="stone_label">
<input type="radio" name="product_stone" value="black" > black
</label>
<label class="stone_label">
<input type="radio" name="product_stone" value="blue" > blue
</label>
</div>
<div class="combination">
Combination
<div class="hidden">
<input type="radio" name="combination" class="hidden_wrap" data-color="gold" data-stone="malachite" data-handle="joory-earring-malachite-gold"> gold-malachite
<input type="radio" name="combination" class="hidden_wrap" data-color="gold" data-stone="tiger-eye" data-handle="copy-of-joory-earrings-tiger-eye-gold">gold-tiger-eye
<input type="radio" name="combination" class="hidden_wrap" data-color="rose gold" data-stone="black" data-handle="kanz-ring-black-rose-gold"> rose-gold-black
<input type="radio" name="combination" class="hidden_wrap" data-color="silver" data-stone="blue" data-handle="joory-earring-blue-silver"> silver-blue
</div>
</div>
You need some jQuery to achieve this
<script>
$(document).ready(function() {
$('.product_description').click(function() {
var color = $('input[name="product_color"]:checked').val();
var stone = $('input[name="product_stone"]:checked').val();
var combinationClass = color + "-" + stone
if ($('.' + combinationClass).length) {
$('.' + combinationClass).attr('checked', true)
} else {
//If the class name of the combination is not found
alert("something went wrong");
}
});
});
</script>
HTML Code
<!--
# Added common class for all the stone and colour radio buttons to enable trigger
# Added Class based on the colour and stone value in the combination
# Added checked attribute to stone and colour radio buttons for on Load default selection
-->
<div class="product_colors">
<span class="header" style="display:block;">Color</span>
<label class="color_label">
<input type="radio" class="product_description" name="product_color" value="gold" checked>Gold
<span></span>
</label>
<label class="color_label">
<input type="radio" class="product_description" name="product_color" value="rose-gold">Rose Gold
<span data-title="rose gold"></span>
</label>
<label class="color_label">
<input type="radio" class="product_description" name="product_color" value="silver"> Silver
<span data-title="silver"></span>
</label>
</div>
<div class="product_stones">
<span class="header" style="display:block;">Stone</span>
<label class="stone_label">
<input type="radio" class="product_description" name="product_stone" value="malachite" checked>malachite
</label>
<label class="stone_label active">
<input type="radio" class="product_description" name="product_stone" value="tiger-eye"> tiger-eye
</label>
<label class="stone_label">
<input type="radio" class="product_description" name="product_stone" value="black"> black
</label>
<label class="stone_label">
<input type="radio" class="product_description" name="product_stone" value="blue"> blue
</label>
</div>
<div class="combination">
Combination
<div class="hidden">
<input type="radio" name="combination" class="hidden_wrap gold-malachite" data-color="gold" data-stone="malachite" data-handle="joory-earring-malachite-gold"> gold-malachite
<input type="radio" name="combination" class="hidden_wrap gold-toger-eye" data-color="gold" data-stone="tiger-eye" data-handle="copy-of-joory-earrings-tiger-eye-gold">gold-tiger-eye
<input type="radio" name="combination" class="hidden_wrap rose-gold-black" data-color="rose gold" data-stone="black" data-handle="kanz-ring-black-rose-gold"> rose-gold-black
<input type="radio" name="combination" class="hidden_wrap silver-blue" data-color="silver" data-stone="blue" data-handle="joory-earring-blue-silver"> silver-blue
</div>
</div>
We have many radio input.
function showReferal() {
document.querySelector('#referral_code').classList.remove('d-none');
}
<div class="form-group row d-none" id="referral_code">
<label for="referral_code">Referral Code</label>
<div class="col-md-10">
<input id="referral_code" type="text" class="form-control" name="referral_code">
</div>
</div>
<input class="form-check-input" type="radio" name="familiar" id="google" value="1">
<input class="form-check-input" type="radio" name="familiar" id="friends" value="2">
<input class="form-check-input" type="radio" name="familiar" id="advertising" value="3">
<input class="form-check-input" type="radio" name="familiar" id="marketer" value="4" onclick="showReferal()">
And when I click on #marketer should show #referral_code.
When I click on advertising and google and friends , referral_code must be hidden. only marketer be show
Similar to Alex Kudryashev's answer, but you can use the built-in toggle method instead of writing an if statement.
function showReferal(show) {
var refCode = document.querySelector('#referral_code');
refCode.classList.toggle('d-none', !show);
}
.d-none {
display: none
}
<div class="form-group row d-none" id="referral_code">
<label for="referral_code">Referral Code</label>
<div class="col-md-10">
<input id="referral_code" type="text" class="form-control" name="referral_code">
</div>
</div>
<input class="form-check-input" type="radio" name="familiar" id="google" value="1" onclick="showReferal(false)">
<input class="form-check-input" type="radio" name="familiar" id="friends" value="2" onclick="showReferal(false)">
<input class="form-check-input" type="radio" name="familiar" id="advertising" value="3" onclick="showReferal(false)">
<input class="form-check-input" type="radio" name="familiar" id="marketer" value="4" onclick="showReferal(true)">
You need to call the function from each radio button.
function showReferal(show) {
var refCode = document.querySelector('#referral_code');
if (show) {
refCode.classList.remove('d-none');
} else if (refCode.classList.value.indexOf('d-none') === -1) {
refCode.classList.add('d-none');
}
}
.d-none {
display: none
}
<div class="form-group row d-none" id="referral_code">
<label for="referral_code">Referral Code</label>
<div class="col-md-10">
<input id="referral_code" type="text" class="form-control" name="referral_code">
</div>
</div>
<input class="form-check-input" type="radio" name="familiar" id="google" value="1" onclick="showReferal(false)">
<input class="form-check-input" type="radio" name="familiar" id="friends" value="2" onclick="showReferal(false)">
<input class="form-check-input" type="radio" name="familiar" id="advertising" value="3" onclick="showReferal(false)">
<input class="form-check-input" type="radio" name="familiar" id="marketer" value="4" onclick="showReferal(true)">
On my page there is a dropdown list of items (Main Complaint) and a checkbox list on a popup (Additional Complaint) as shown in above image.
The popup checkbox list of Additional Complaint is like below (There are more items in my list so list is in four columns):
HTML code
<label class="question-name" ng-class="{error:hasError()}"> <span class="ng-binding" ng-hide="question.nameHiddenOnMobile">Main Complaint </span> <span class="icon-required" ng-show="question.required"></span> </label>
<select name="Language.PrimarySpoken" ng-hide="showAddAnswer" ng-model="question.response.value" ng-options="a.text as a.getText() for a in question.answers.items" id="Language.PrimarySpoken" ng-value="a.text" class="input-wide " ng-class="{error:hasError()}" ng-change="selectAnswer()">
<option class="hidden" disabled="disabled" value=""></option>
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
<option value="Four">Four</option>
<option value="Five">Five</option>
<option value="Six">Six</option>
<option value="Seven">Seven</option>
<option value="Eight">Eight</option>
</select>
<label class="question-name" ng-class="{error:hasError()}"> <span class="ng-binding" ng-hide="question.nameHiddenOnMobile">Additional Complaint </span> <span class="icon-required" ng-show="question.required"></span> </label>
<div class="form-row added ng-binding content" ng-bind-html="question.getText()" id="text" ></div>
<div class="form-row addlink ng-binding" ng-bind-html="question.getText()"><em><a class='inline' href="#inline_content">+ Add/Edit</a></em></div>
<div style='display:none'>
<div id='inline_content' style='padding:25px; background:#fff; font-size: 17px;'>
<form action="" id="popup_form">
<div class="added">
<div class="column-left">
<label class="checkbox" for="checkbox1" style="font-size:20px;">
<input type="checkbox" name="complaint" value="One" id="checkbox1" data-toggle="checkbox">
One
</label>
<br/>
<label class="checkbox" for="checkbox2" style="font-size:20px;">
<input type="checkbox" name="complaint" value="Two" id="checkbox2" data-toggle="checkbox">
Two
</label>
<br/>
</div>
<div class="column-center">
<label class="checkbox" for="checkbox3" style="font-size:20px;">
<input type="checkbox" name="complaint" value="Three" id="checkbox3" data-toggle="checkbox">
Three
</label>
<br/>
<label class="checkbox" for="checkbox4" style="font-size:20px;">
<input type="checkbox" name="complaint" value="Four" id="checkbox4" data-toggle="checkbox">
Four
</label>
<br/>
</div>
<div class="column-center-right">
<label class="checkbox" for="checkbox5" style="font-size:20px;">
<input type="checkbox" name="complaint" value="Five" id="checkbox5" data-toggle="checkbox">
Five
</label>
<br/>
<label class="checkbox" for="checkbox6" style="font-size:20px;">
<input type="checkbox" name="complaint" value="Six" id="checkbox6" data-toggle="checkbox">
Six
</label>
<br/>
</div>
<div class="column-right">
<label class="checkbox" for="checkbox7" style="font-size:20px;">
<input type="checkbox" name="complaint" value=" Seven" id="checkbox7" data-toggle="checkbox">
Seven
</label>
<br/>
<label class="checkbox" for="checkbox8" style="font-size:20px;">
<input type="checkbox" name="complaint" value="Eight" id="checkbox8" data-toggle="checkbox">
Eight
</label>
<br/>
</div>
</div>
<br/>
<input type="submit" name="submit" id="update" class="button button-orange" style="width: 90px; margin-top: 450px;
margin-left: -533px;" value="Update">
<input type="submit" name="cancel" id="cancel" class="button button-orange" style="width: 90px; background-color:#36606e;" value="Cancel">
</form>
</div>
</div>
JS code
$(document).ready(function(){
$(".inline").colorbox({inline:true,opacity:0.7, fixed:true, innerWidth:1100, innerHeight:550, scrolling:false});
//array to store checkbox values
checkValues = new Array();
document.getElementById('update').onclick = function(){
//capture all text in a variable
var textStr = $('<ul></ul>');
//iterate all checkbox values to create ul
$.each(checkValues, function( index, value ){
textStr.append('<li>'+value+'</li>');
});
//add text
$("#text").html(textStr);
parent.$.colorbox.close();
return false;
};
//add change handler for checkbox
$('input:checkbox[name=complaint]').change(function(){
value = $(this).val();
if(this.checked)
checkValues.push(value);
else
{ //Removing by value
checkValues = $.grep(checkValues, function(n, i) {
return n !== value;
});
}
});
document.getElementById('cancel').onclick = function(){
parent.$.colorbox.close();
return false;
};
});
Question:
If the 'One' item is selected from the dropdown list of Main Complaint, then in the Additional Complaint checkbox list that 'One' item should not appear like below. But the empty space also should not be there.
Can anyone please tell me, how do I get that working using Jquery/JS?
Thanks in advance.
I could not develop a modal window in fiddle but i have written Javascript logic, hope you will find it helpful, working fiddle
JAVASCRIPT
function selectAnswer(sel){
var a= document.querySelectorAll('label');
console.log(this.value);
for(i=0;i<a.length;i++){
a[i].style.display='inline'
}
document.querySelectorAll('.checkbox'+sel.value)[0].style.display='none';
}
while i change your onchange function to this->
onchange="selectAnswer(this)"
Hoping this helps you.
<div style="display:none">
<label class="checkbox" for="checkbox1" style="font-size:20px;">
<input type="checkbox" name="complaint" value="Three" id="checkbox3" data-toggle="checkbox">
One
</label>
</div>
<div >
<label class="checkbox" for="checkbox1" style="font-size:20px;">
<input type="checkbox" name="complaint" value="Four" id="checkbox4" data-toggle="checkbox">
Two
</label>
<br/>
</div>
add div to all labels and apply the css property "display:none" when you click the checkbox hope this will work
I need a way to show correct price for a product with selection options. Radio Box 1 has 4 products with different price ProductA=$10, ProductB=$20, ProductC=$30, ProductD=$40
Radio Box 2 has two options Male and Female
For female all products are always $10 regardless of Radio Box 1 selection. Price varies for men depending on product choice. I need to show price change dynamically with js.
http://jsfiddle.net/pe2gpp01/
<div><label class="product">Product</label>
<span>
<input name="category" type="radio" value="10">
<label>Product A</label>
<input name="category" type="radio" value="20">
<label>Product B</label>
<input name="category" type="radio" value="30">
<label>Product C</label>
<input name="category" type="radio" value="40">
<label>Product D</label>
</span></div>
<div>
<label class="gender">Gender</label>
<span>
<input name="gender" type="radio" value="">
<label>Male</label>
<input name="gender" type="radio" value="">
<label>Female</label>
</span></div>
<span>Price:</span>
DEMO
html
<div>
<label class="product">Product</label>
<span>
<input name="category" type="radio" value="10" >
<label>Product A</label>
<input name="category" type="radio" value="20" checked>
<label>Product B</label>
<input name="category" type="radio" value="30">
<label>Product C</label>
<input name="category" type="radio" value="40" >
<label>Product D</label>
</span></div>
<div>
<label class="gender">Gender</label>
<span>
<input name="gender" type="radio" value="male" checked>
<label>Male</label>
<input name="gender" type="radio" value="female">
<label>Female</label>
</span></div>
<span>Show Price: <span id="price"></span></span>
js
$(function() {
$('[type="radio"]').on('change', function() {
var price = $('[value="female"]')[0].checked
? 10
: $('[name="category"]:checked').val();
$('#price').text(price);
}).change();
});
Basically I have a survey, where I want people to rank 5 items 1-5 based on importance.
Here is the HTML: http://jsfiddle.net/madcaesar/jj8ky/
<form>
<table>
<tr>
<th colspan="2" class="altTH" style="text-align:left">Please rank, in order of most important (1) to least important (5)</th>
</tr>
<tr>
<th><label>Professionalism (promoting the profession of medicine)</label></th>
<td>
<label style="display:inline"><input type="radio" name="Professionalism" value="1" class="checkbox"/> 1</label>
<label style="display:inline"><input type="radio" name="Professionalism" value="2" class="checkbox"/> 2</label>
<label style="display:inline"><input type="radio" name="Professionalism" value="3" class="checkbox"/> 3</label>
<label style="display:inline"><input type="radio" name="Professionalism" value="4" class="checkbox"/> 4</label>
<label style="display:inline"><input type="radio" name="Professionalism" value="5" class="checkbox"/> 5</label>
</td>
</tr>
<tr>
<th><label>Government Relations (state and federal government advocacy)</label></th>
<td>
<label style="display:inline"><input type="radio" name="GovernmentRelations" value="1" class="checkbox"/> 1</label>
<label style="display:inline"><input type="radio" name="GovernmentRelations" value="2" class="checkbox"/> 2</label>
<label style="display:inline"><input type="radio" name="GovernmentRelations" value="3" class="checkbox"/> 3</label>
<label style="display:inline"><input type="radio" name="GovernmentRelations" value="4" class="checkbox"/> 4</label>
<label style="display:inline"><input type="radio" name="GovernmentRelations" value="5" class="checkbox"/> 5</label>
</td>
</tr><tr>
<th><label>Education (e.g. CME, staff training, meetings)</label></th>
<td>
<label style="display:inline"><input type="radio" name="Education" value="1" class="checkbox"/> 1</label>
<label style="display:inline"><input type="radio" name="Education" value="2" class="checkbox"/> 2</label>
<label style="display:inline"><input type="radio" name="Education" value="3" class="checkbox"/> 3</label>
<label style="display:inline"><input type="radio" name="Education" value="4" class="checkbox"/> 4</label>
<label style="display:inline"><input type="radio" name="Education" value="5" class="checkbox"/> 5</label>
</td>
</tr>
<tr>
<th><label>Regulatory and legal analysis and support</label></th>
<td>
<label style="display:inline"><input type="radio" name="Regulatory" value="1" class="checkbox"/> 1</label>
<label style="display:inline"><input type="radio" name="Regulatory" value="2" class="checkbox"/> 2</label>
<label style="display:inline"><input type="radio" name="Regulatory" value="3" class="checkbox"/> 3</label>
<label style="display:inline"><input type="radio" name="Regulatory" value="4" class="checkbox"/> 4</label>
<label style="display:inline"><input type="radio" name="Regulatory" value="5" class="checkbox"/> 5</label>
</td>
</tr>
<tr>
<th><label>Communications (Iowa Medicine magazine, website, media relations, etc.)</label></th>
<td>
<label style="display:inline"><input type="radio" name="Communications" value="1" class="checkbox"/> 1</label>
<label style="display:inline"><input type="radio" name="Communications" value="2" class="checkbox"/> 2</label>
<label style="display:inline"><input type="radio" name="Communications" value="3" class="checkbox"/> 3</label>
<label style="display:inline"><input type="radio" name="Communications" value="4" class="checkbox"/> 4</label>
<label style="display:inline"><input type="radio" name="Communications" value="5" class="checkbox"/> 5</label>
</td>
</tr>
</table>
</form>
Is it possible with jQuery to make 1 unavailable once 1 has been selected once? and 2 once 2 has been selected and so forth? Right now they can select any number they want, and I can't figure out a way to do this.
What about something like this, where if you select a certain number, it unselects any others that have the same value?:
http://jsfiddle.net/jj8ky/2/
$("#radio_table").on("click", ".checkbox", function () {
var $this = $(this);
var all = $("#radio_table").find(".checkbox").not($this);
var val = $this.val();
if ($this.prop("checked") === true) {
all.filter(function () {
return $(this).val() === val;
}).prop("checked", false);
}
});
You can disable some radio when needed : ex
if($("#radio").val()==2) $("#otherRadio").attr("disabled",true);