Dropdown with Radio button and jQuery - javascript

I coded a dropdown menu with radio button to change currency in my website. I use jQuery to open/close this dropdown but the currency change doesn't work.
The expanded class is used to open/close the dropdown menu.
I think that the error comes from the line $('#' + $(e.target).attr('for')).prop('checked', true); but I don't know how to modify this. I want it to check the right input.
$('.maincar__currency').click(function(e) {
e.preventDefault();
e.stopPropagation();
$(this).toggleClass('expanded');
$('#' + $(e.target).attr('for')).prop('checked', true);
});
$(document).click(function() {
$('.maincar__currency').removeClass('expanded');
});
.maincar__currency {
display: flex;
flex-direction: column;
min-height: 32px;
max-height: 32px;
margin-left: auto;
margin-bottom: 10px;
overflow: hidden;
border-radius: 6px;
box-sizing: border-box;
box-shadow: $shadowBox;
font-size: 14px;
font-weight: 500;
}
.maincar__currency label {
display: flex;
width: 80px;
height: 32px;
padding-top: 6px;
padding-bottom: 6px;
padding-left: 8px;
margin-right: 0 auto;
background-color: #fff;
text-align: center;
color: $mediumMainGrey;
cursor: pointer;
//box-sizing: border-box;
}
.maincar__currency label:hover {
background-color: $extraLightGrey;
}
.currency {
display: flex;
width: 100%;
}
.currency input {
display: none;
}
.currency img {
//object-fit: contain;
height: 20px;
width: auto;
margin-right: 6px;
}
.currency span {
display: flex;
//align-items: center;
color: $mediumMainGrey;
text-decoration: none;
}
.expanded {
max-height: 128px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="maincar__currency">
<label for="euro-radio-is">
<div class="currency currency__euro">
<img src="/assets/images/icons/euro.png" alt="Euro sign">
<input type="radio" name="currency-is" value="euro" id="euro-radio-is" class="euro_radio_is" checked="true">
<span class="default">EUR</span>
</div>
</label>
<label for="dollar-radio-is">
<div class="currency currency__dollar">
<img src="/assets/images/icons/dollar.png" alt="Dollar sign">
<input type="radio" name="currency-is" id="dollar-radio-is" class="dollar_radio_is" value="dollar">
<span>USD</span>
</div>
</label>
<label for="gbp-radio-is">
<div class="currency currency__pound">
<img src="/assets/images/icons/pound-sterling.png" alt="Pound sign">
<input type="radio" name="currency-is" id="gbp-radio-is" class="gbp_radio_is" value="gbp">
<span>GBP</span>
</div>
</label>
<label for="chf-radio-is">
<div class="currency currency__chf">
<img src="/assets/images/icons/swiss-franc.png" alt="Swiss franc sign">
<input type="radio" name="currency-is" id="chf-radio-is" class="chf_radio_is" value="chf">
<span>CHF</span>
</div>
</label>
</div>

Try to use below code:-
$(document).ready(function(){
$("input[type='radio']").click(function(){
var radioValue = $("input[name='currency-is']:checked").val();
if(radioValue){
alert("Your are a - " + radioValue);
}
});
});
You'll get the radio button value. Let me know if this helps you...

CSS (add these extra classes):
.maincar__currency label{
display: none;
}
.expanded label{
display: block;
}
JS & Html:
$('.maincar__currency').click(function(e) {
e.preventDefault();
e.stopPropagation();
$(this).toggleClass('expanded');
});
$(".maincar__currency label").click(function(){
$('#' + $(this).attr('for')).prop('checked', true);
var selected = $('input[name=currency-is]:checked').val(); // <-- add this line
$('.active_currency').text(selected.toUpperCase()); // <-- and this line
alert(selected);
});
$(document).click(function() {
$('.maincar__currency').removeClass('expanded');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="maincar__currency">
<div class="active_currency">EUR</div>
<label for="euro-radio-is">
<div class="currency currency__euro">
<img src="/assets/images/icons/euro.png" alt="Euro sign">
<input type="radio" name="currency-is" value="euro" id="euro-radio-is" class="euro_radio_is" checked="true" />
<span class="default">EUR</span>
</div>
</label>
<label for="dollar-radio-is">
<div class="currency currency__dollar">
<img src="/assets/images/icons/dollar.png" alt="Dollar sign">
<input type="radio" name="currency-is" id="dollar-radio-is" class="dollar_radio_is" value="dollar" />
<span>USD</span>
</div>
</label>
<label for="gbp-radio-is">
<div class="currency currency__pound">
<img src="/assets/images/icons/pound-sterling.png" alt="Pound sign">
<input type="radio" name="currency-is" id="gbp-radio-is" class="gbp_radio_is" value="gbp" />
<span>GBP</span>
</div>
</label>
<label for="chf-radio-is">
<div class="currency currency__chf">
<img src="/assets/images/icons/swiss-franc.png" alt="Swiss franc sign">
<input type="radio" name="currency-is" id="chf-radio-is" class="chf_radio_is" value="chf" />
<span>CHF</span>
</div>
</label>
</div>

Related

how can i add multiple radio checked in one column

I want multiple radio checkboxes. In one line it should be private or shared and in the second line, it should be with ATV or Without ATV so people on my web can select shared and with ATV or many variables. so basically two selections are needed and 4four checkboxes are divided into two groups.
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
.small-img-group {
display: flex;
justify-content: space-between;
}
.small-img-col {
flex-basis: 24%;
cursor: pointer;
}
.counter1 {
float: left;
display: flex;
justify-content: space-between;
overflow-x: hidden;
overflow-y: hidden;
}
.counter2 {
float: left;
display: flex;
justify-content: space-between;
overflow-x: hidden;
overflow-y: hidden;
padding-left: 15px;
}
.up,
.down {
display: inline-block;
color: rgb(0, 0, 0);
font-size: 20px;
margin: 1px 1px;
cursor: pointer;
width: 15px;
line-height: 14px;
height: 16px;
text-align: center;
font-weight: bold;
border: 1px solid #000;
user-select: none;
}
.up:hover,
.down:hover {
color: #fd0b3f;
text-align: center;
}
.adults {
padding-right: 5px;
}
.children {
padding-right: 5px;
}
input {
appearance: none;
height: 21px;
text-align: center;
width: 42px;
line-height: 24px;
font-size: 15px;
border-radius: 5px;
}
.container {
display: flex;
}
input[type="radio"] {
display: none;
}
label[for=private] {
position: relative;
color: orangered;
font-size: 20px;
border: 2px solid orangered;
border-radius: 5px;
align-items: left;
display: flex;
cursor: pointer;
margin-right: 10px;
}
label[for=shared] {
position: relative;
color: orangered;
font-size: 20px;
border: 2px solid orangered;
border-radius: 5px;
align-items: left;
display: flex;
cursor: pointer;
}
input[type="radio"]:checked+label {
background-color: orangered;
color: white;
}
input[type="radio"]:checked+label:before {
height: 16px;
width: 16px;
border: 10px solid white;
background-color: orangered;
}
</style>
</head>
<body>
<section class="container sproduct my-5 pt-5">
<div class="row mt-5">
<div class="col-lg-5 col-md-12 col-12">
<img class="img-fluid w-100 pb-1" src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" alt="" id="MainImg" width="450">
<div class="small-img-group">
<div class="small-img-col">
<img src="https://media.tacdn.com/media/attractions-splice-spp-674x446/09/99/99/87.jpg" width="100%" class="small-img" alt="">
</div>
<div class="small-img-col">
<img src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" width="100%" class="small-img" alt="">
</div>
<div class="small-img-col">
<img src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" width="100%" class="small-img" alt="">
</div>
<div class="small-img-col">
<img src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" width="100%" class="small-img" alt="">
</div>
</div>
</div>
<div class="col-lg-6 col-md-12 col-12">
<h6>Home / Morning Safari</h6>
<h3>Morning Safari</h3>
<h2> <label> Total:</label><label class="total Price"></label> </h2>
<div class="counter1">
<Label class="Adults">Adults</Label>
<div class='down' onclick='decreaseCount(event, this)'>-</div>
<input type='text' value='1' readonly>
<div class='up' onclick='increaseCount(event, this)'>+</div>
</div>
<div class="counter2">
<Label class="Children">Children</Label>
<div class='down' onclick='decreaseCount2(event, this)'>-</div>
<input type='text' value='0' readonly>
<div class='up' onclick='increaseCount(event, this)'>+</div>
</div>
<div class="container" style="padding-left: 0;padding-top: 5px;">
<div>
<input type="radio" name="occupancy" id="private" checked="checked">
<label for="private">Private</label>
<input type="radio" name="occupancy" id="shared">
<label for="shared">Shared</label>
</div>
<div>
<input type="radio" name="atv" id="withatv" checked="checked">
<label for="withatv">With ATV</label>
<input type="radio" name="atv" id="withoutatv">
<label for="withoutatv">Without ATV</label>
</div>
</div>
</div>
</div>
</section>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script>
function increaseCount(e, el) {
var input = el.previousElementSibling;
var value = parseInt(input.value, 10);
value = isNaN(value) ? 0 : value;
value++;
input.value = value;
}
function decreaseCount(e, el) {
var input = el.nextElementSibling;
var value = parseInt(input.value, 10);
if (value > 1) {
value = isNaN(value) ? 0 : value;
value--;
input.value = value;
}
}
function decreaseCount2(e, el) {
var input = el.nextElementSibling;
var value = parseInt(input.value, 10);
if (value > 0) {
value = isNaN(value) ? 0 : value;
value--;
input.value = value;
}
}
var MainImg = document.getElementById('MainImg');
var smallimg = document.getElementsByClassName('small-img');
smallimg[0].onclick = function() {
MainImg.src = smallimg[0].src;
}
smallimg[1].onclick = function() {
MainImg.src = smallimg[1].src;
}
smallimg[2].onclick = function() {
MainImg.src = smallimg[2].src;
}
smallimg[3].onclick = function() {
MainImg.src = smallimg[3].src;
}
</script>
</body>
</html>
Hi, I want multiple radio checkboxes. In one line it should be private or shared and in the second line it should be with ATV or Without ATV so people on my web can select shared and with ATV or many variables. so basically two selections are needed and 4four checkboxes are divided into two groups.
edited
i did what you said in comment it looks like this and its not same as private and shared
The name tags on your ATV checkboxes should be changed from "occupancy" to something else like "atv". You could also wrap each group of inputs in separate divs if you want them to appear in separate rows. Finally you should also make your ids unique and update you label for tags so:
<div class="container style1" style="padding-left: 0;padding-top: 5px;">
<div class="">
<input type="radio" name="occupancy" id="private" checked="checked">
<label for="private">Private</label>
<input type="radio" name="occupancy" id="shared">
<label for="shared">Shared</label>
</div>
<div>
<input type="radio" name="atv" id="withatv" checked="checked">
<label for="withatv">With ATV</label>
<input type="radio" name="atv" id="withoutatv">
<label for="withoutatv">Without ATV</label>
</div>
</div>
I added a style1 class to your container but maybe you might want to add that style directly to .container. Anyway add these styles:
.style1{
flex-direction:column;
}
label[for="private"], label[for="shared"] { {
display: inline-block;
}

remove element with click on outer element in window with javascript

I want, That user click on input type="checkbox", "textarea" is displayed.
then when user click on anywhere except same "textarea", same "textarea" is hidden.
please help me that do this work.
If you have a suggestion for solving this problem, thank you for letting me know.
Thank you in advance for your cooperation.
var requiredDescription = document.querySelectorAll(".required-description");
requiredDescription.forEach(item => {
item.addEventListener('click', function(){
item.classList.toggle('active');
});
});
window.addEventListener("click", function(event){
var desText = document.querySelector('input.active');
if (event.target !== desText) {
description.classList.remove('show');
}
});
.items{
border: 1px solid var(--txt);
padding: .5rem;
border-radius: 10px;
}
p > span.label{
width: 30%;
display: block;
}
p > span.label-items{
width: 70%;
display: flex;
align-items: center;
justify-content: space-between;
}
p > span.label-items > lable.label-item{
display: flex;
align-items: center;
width: 100%;
}
.description{
border: 2px solid var(--c2);
background-color: #e6eef7;
border-radius: 10px;
outline: none;
position: absolute;
left: 20%;
top: 10%;
width: 50%;
z-index: 1;
padding: 1rem;
display: none;
}
p > span.label-items > label.label-item > input.active ~ .description{
display: block;
}
<p class="items">
<span class="label">example1</span>
<span class="label-items">
<label class="label-item" for="Others">
<input type="checkbox" name="Others" id="Others" class="required-description">
Others
<textarea class="description" placeholder="Define who" cols="50" rows="3"></textarea>
</label>
</span>
</p>
<p class="items">
<span class="label">example2</span>
<span class="label-items">
<label class="label-item" for="Yes">
<input type="checkbox" name="Yes" id="Yes" class="required-description">
Yes
<textarea class="description" placeholder="Explain more" cols="50" rows="3"></textarea>
</label>
</span>
</p>
<p class="items">
<span class="label">example3</span>
<span class="label-items">
<label class="label-item" for="ok">
<input type="checkbox" name="ok" id="ok" class="required-description">
Yes
<textarea class="description" placeholder="Define" cols="50" rows="3"></textarea>
</label>
</span>
</p>
You can add click event to body element and check the element which is clicked to remove the class.
You can try the following way:
var requiredDescription = document.querySelectorAll(".required-description");
requiredDescription.forEach(item => {
item.addEventListener('click', function(){
item.classList.toggle('active');
});
});
document.querySelector('body').addEventListener('click', function(e){
if(!(e.target.nodeName == 'SPAN' || e.target.nodeName == 'INPUT' || e.target.nodeName == 'TEXTAREA')){
requiredDescription.forEach(item => {
item.classList.remove('active');
document.querySelectorAll(":checked").forEach(function(chk){
chk.checked = false;
});
});
}
});
.items{
border: 1px solid var(--txt);
padding: .5rem;
border-radius: 10px;
}
p > span.label{
width: 30%;
display: block;
}
p > span.label-items{
width: 70%;
display: flex;
align-items: center;
justify-content: space-between;
}
p > span.label-items > lable.label-item{
display: flex;
align-items: center;
width: 100%;
}
.description{
border: 2px solid var(--c2);
background-color: #e6eef7;
border-radius: 10px;
outline: none;
position: absolute;
left: 20%;
top: 10%;
width: 50%;
z-index: 1;
padding: 1rem;
display: none;
}
p > span.label-items > label.label-item > input.active ~ .description{
display: block;
}
I want, That user click on input type="checkbox", "textarea" is displayed. then when user click on anywhere except same "textarea", same "textarea" is hidden. please help me that do this work. If you have a suggestion for solving this problem, thank you for letting me know. Thank you in advance for your cooperation.
<p class="items">
<span class="label">example1</span>
<span class="label-items">
<label class="label-item" for="Others">
<input type="checkbox" name="Others" id="Others" class="required-description">
Others
<textarea class="description" placeholder="Define who" cols="50" rows="3"></textarea>
</label>
</span>
</p>
<p class="items">
<span class="label">example2</span>
<span class="label-items">
<label class="label-item" for="Yes">
<input type="checkbox" name="Yes" id="Yes" class="required-description">
Yes
<textarea class="description" placeholder="Explain more" cols="50" rows="3"></textarea>
</label>
</span>
</p>
<p class="items">
<span class="label">example3</span>
<span class="label-items">
<label class="label-item" for="ok">
<input type="checkbox" name="ok" id="ok" class="required-description">
Yes
<textarea class="description" placeholder="Define" cols="50" rows="3"></textarea>
</label>
</span>
</p>

how to make less space between all button using css

what i am trying to do is when i click on check box then div is display horizontal.
but in my below code when i click on checkbox then div is showing div is vertically.
but i try to make when i click on checkbox then div is show horizontally.
how can we do that using CSS
is there any help.
$(document).ready(function() {
$('input[type="checkbox"]').click(function() {
var inputValue = $(this).attr("value");
$("." + inputValue).toggle();
});
});
.selectt {
color: #fff;
padding: 30px;
display: none;
margin-top: 30px;
width:20%;
}
label {
margin-right: 15px;
}
.d-flex-wrapper {
display: flex;
}
.d-flex-wrapper > div{
margin-right:5px;
}
.d-flex-wrapper > div:last-chid{
margin-right:30px;
}
.button {
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button2 {background-color: #008CBA;} /* Blue */
<script src=
"https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div>
<label>
<input type="checkbox" name="colorCheckbox"
value="C"> C</label>
<label>
<input type="checkbox" name="colorCheckbox"
value="Cplus"> C++</label>
<label>
<input type="checkbox" name="colorCheckbox"
value="Python"> Python</label>
<label>
<input type="checkbox" name="colorCheckbox"
value="Java"> Java</label>
</div>
<div class="d-flex-wrapper"> <!-- Added New div start here -->
<div class="C selectt">
<button class="button button2">Blue</button>
</div>
<div class="Cplus selectt">
<button class="button button2">Blue</button>
</div>
<div class="Python selectt">
<button class="button button2">Blue</button></div>
<div class="Java selectt">
<button class="button button2">Blue</button></div> <!-- Added New div end's here -->
</div>
You Can use- Display Flex
$(document).ready(function() {
$('input[type="checkbox"]').click(function() {
var inputValue = $(this).attr("value");
$("." + inputValue).toggle();
});
});
.selectt {
color: #fff;
padding: 30px;
display: none;
margin-top: 30px;
width:20%;
background: green
}
label {
margin-right: 20px;
}
.d-flex-wrapper {
display: flex;
}
.d-flex-wrapper > div{
margin-right:20px;
}
.d-flex-wrapper > div:last-chid{
margin-right:0px;
}
<script src=
"https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div>
<label>
<input type="checkbox" name="colorCheckbox"
value="C"> C</label>
<label>
<input type="checkbox" name="colorCheckbox"
value="Cplus"> C++</label>
<label>
<input type="checkbox" name="colorCheckbox"
value="Python"> Python</label>
<label>
<input type="checkbox" name="colorCheckbox"
value="Java"> Java</label>
</div>
<div class="d-flex-wrapper"> <!-- Added New div start here -->
<div class="C selectt">
<strong>C</strong>
is a procedural programming language
</div>
<div class="Cplus selectt">
<strong>C++</strong>
is a general purpose programming language</div>
<div class="Python selectt">
<strong>Python</strong>
is a widely used general-purpose, high level
programming language.</div>
<div class="Java selectt">
<strong>Java</strong>
is a most popular programming language
for many years.</div> <!-- Added New div end's here -->
</div>
I Hope it's Help You :)
Thanks
wrap the green boxes inside a div with the css property and value: display: flex;
$(document).ready(function() {
$('input[type="checkbox"]').click(function() {
var inputValue = $(this).attr("value");
$("." + inputValue).toggle();
});
});
.selectt {
color: #fff;
padding: 30px;
display: none;
margin-top: 30px;
width: 20%;
background: green
}
label {
margin-right: 20px;
}
/* Added for the wrapper */
.flex-wrap {
display: flex;
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div>
<label>
<input type="checkbox" name="colorCheckbox" value="C"> C</label>
<label>
<input type="checkbox" name="colorCheckbox" value="Cplus"> C++</label>
<label>
<input type="checkbox" name="colorCheckbox" value="Python"> Python</label>
<label>
<input type="checkbox" name="colorCheckbox" value="Java"> Java</label>
</div>
<div class="flex-wrap"> <!-- Added opening div -->
<div class="C selectt">
<strong>C</strong> is a procedural programming language
</div>
<div class="Cplus selectt">
<strong>C++</strong> is a general purpose programming language</div>
<div class="Python selectt">
<strong>Python</strong> is a widely used general-purpose, high level programming language.</div>
<div class="Java selectt">
<strong>Java</strong> is a most popular programming language for many years.</div>
</div> <!-- Added closing div -->

Change image when radio button checked

I am building a form to measure carpets dimension. In the form there is radio button which user can choose type of carpet. I want to make when the radio button checked, the image of the carpet change based on the selected radio button.
1st image : radio button to choose carpet size
2nd image: carpet change based on selected radio button
Below is the code:
<form class="carpet-detail text-center container">
<p class="text-center">Upload your carpet’s photo here :</p>
<div class="upload-carpet">
<div id="image-preview">
<input id="image-upload" name="image" type="file">
</div>
<label for="image-upload" id="image-label">Choose File</label>
</div>
<p class="carpet-name">Carpet 1</p>
<p>Choose your carpet shape :</p>
<div class="carpet-shape">
<div class="choose-carpet">
<input checked class="radio-shape" id="carpet-shape-1" name="carpet-shape" type="radio"> <label class="choose-shape" for="carpet-shape-1">Rectangular</label>
</div>
<div class="choose-carpet">
<input class="radio-shape" id="carpet-shape-2" name="carpet-shape" type="radio"> <label class="choose-shape" for="carpet-shape-2">Square</label>
</div>
<div class="choose-carpet">
<input class="radio-shape" id="carpet-shape-3" name="carpet-shape" type="radio"> <label class="choose-shape" for="carpet-shape-3">Round</label>
</div>
<div class="choose-carpet">
<input class="radio-shape" id="carpet-shape-4" name="carpet-shape" type="radio"> <label class="choose-shape" for="carpet-shape-4">Oval</label>
</div>
</div>
<p>Please insert your carpet size :</p>
<img alt="carpet rectangle" class="carpet-icon" height="116" src="img/icons/carpet-rectangle.svg" width="194">
<div class="grid-x grid-padding-x carpet-size">
<div class="small-6 cell text-left">
<p>Width :</p>
</div>
<div class="small-6 cell text-right">
<p>/sqft</p>
</div>
<div class="small-12 cell">
<div class="input-group plus-minus-input">
<div class="input-group-button">
<button type="button" class="button circle" data-quantity="minus" data-field="quantity-width">
<img src="img/icons/size-minus.svg" alt="minus" width="11" height="11">
</button>
</div>
<input class="input-group-field" type="number" name="quantity-width" value="0">
<div class="input-group-button">
<button type="button" class="button circle" data-quantity="plus" data-field="quantity-width">
<img src="img/icons/size-plus.svg" alt="minus" width="11" height="11">
</button>
</div>
</div>
</div>
</div>
<div class="grid-x grid-padding-x carpet-size">
<div class="small-6 cell text-left">
<p>Length :</p>
</div>
<div class="small-6 cell text-right">
<p>/sqft</p>
</div>
<div class="small-12 cell">
<div class="input-group plus-minus-input">
<div class="input-group-button">
<button type="button" class="button circle" data-quantity="minus" data-field="quantity-length">
<img src="img/icons/size-minus.svg" alt="minus" width="11" height="11">
</button>
</div>
<input class="input-group-field" type="number" name="quantity-length" value="0">
<div class="input-group-button">
<button type="button" class="button circle" data-quantity="plus" data-field="quantity-length">
<img src="img/icons/size-plus.svg" alt="plus" width="11" height="11">
</button>
</div>
</div>
</div>
</div>
</form>
You can use the jquery's .change event to do this.
First assign the attribute valueto the radios.
<input class="radio-shape" value="Square" id="carpet-shape-2" name="carpet-shape" type="radio">
Then use the change following juery to trigger the event.
$('input:radio[name="carpet-shape"]').change(
function(){
var $src = "";
if ($(this).val() == 'Square') {
$src = "img/icons/carpet-square.svg";
}
else if ($(this).val() == 'Rectangle') {
$src = "img/icons/carpet-rectangle.svg";
}
else if ($(this).val() == 'Round') {
$src = "img/icons/carpet-round.svg";
}
else{
$src = "img/icons/carpet-oval.svg"
}
$('.carpet-icon').attr('src',$src);
});
Here is a full working jsfiddle
For more information on change event, checkout the jQuery documentation on it.
You just need a JavaScript or jQuery event listener.
//jQuery version
$('#radio1').on('click', function() {
$('#image1').attr('src', 'myNewImage.jpg');
});
//Vanilla JavaScript
document.getElementById('radio1').addEventListener('click', null,
function() {
document.getElementsById('radio1').setAttribute('src', 'myNewImage.jpg');
});
You'd obviously need to add one for each radio button.
You can change the image by using CSS selectors like ~ , +.
By this method, if the checkbox is checked we can select the siblings by using the ~, + selector.
Then we can apply the styles to the selected siblings.
Here I have given the code snippet and working demo.
CSS CODE
.output-shape {
width: 200px;
}
//Square
#square ~ .output-shape{
width: 200px;
}
//Rectangle
#rectangle:checked ~ .output-shape{
width: 280px;
}
//Circle
#circle:checked ~ .output-shape{
border-radius: 50%;
width: 200px;
}
HTML CODE
// Input Field
<input type="radio" name="radio" id="circle" checked>
<input type="radio" name="radio" id="rectangle">
<input type="radio" name="radio" id="square">
// Label Field
<label for="circle">circle</label>
<label for="rectangle">Rectangle</label>
<label for="square">square</label>
// OUTPUT
<div class="output-shape"></div>
Working DEMO
body, html {
font-family: sans-serif;
}
.box-overlay {
background-color: coral;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
.box-content {
background-color: #fff;
max-width: 600px;
text-align: center;
border-radius: 15px;
min-height: 350px;
padding: 15px;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
box-shadow: 0 0 20px rgba(0,0,0,0.5);
}
.output-shape {
width: 200px;
height: 200px;
background-color: white;
border: 1px solid gray;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
margin-bottom: 20px;
}
input {
display: none;
}
label {
padding: 10px;
border: 1px solid gray;
display: inline-block;
border-radius: 5px;
text-transform: uppercase;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 5px;
margin-right: 5px;
}
.option-name {
font-size: 20px;
margin-left: 10px;
margin-right: 10px;
text-transform: uppercase;
}
/* Circle */
label[for="circle"] {
color: dodgerblue;
border-color: dodgerblue;
}
#circle:checked ~ .box-content [for="circle"] {
color: #fff;
background-color: dodgerblue;
}
#circle:checked ~ .box-content .output .option-name{
color: dodgerblue;
}
#circle:checked ~ .box-content .output .option-name:before{
content:"Circle" !important;
}
#circle:checked ~ .box-content .output .output-shape{
border-radius: 50%;
background-color: dodgerblue;
border-color: dodgerblue;
}
#circle:checked ~ .box-overlay {
background-color: dodgerblue !important;
}
/* Rectangle */
label[for="rectangle"] {
color: darkorange;
border-color: darkorange;
}
#rectangle:checked ~ .box-content [for="rectangle"] {
color: #fff;
background-color: darkorange;
}
#rectangle:checked ~ .box-content .output .option-name{
color: darkorange;
}
#rectangle:checked ~ .box-content .output .option-name:before{
content:"rectangle" !important;
}
#rectangle:checked ~ .box-content .output .output-shape{
width: 280px;
background-color: darkorange;
border-color: darkorange;
}
#rectangle:checked ~ .box-overlay {
background-color: darkorange !important;
}
/* Square */
label[for="square"] {
color: #3FBB76;
border-color: #3FBB76;
}
#square:checked ~ .box-content [for="square"] {
color: #fff;
background-color: #3FBB76;
}
#square:checked ~ .box-content .output .option-name{
color: #3FBB76;
}
#square:checked ~ .box-content .output .option-name:before{
content:"square" !important;
}
#square:checked ~ .box-content .output .output-shape{
background-color: #3FBB76;
border-color: #3FBB76;
}
#square:checked ~ .box-overlay {
background-color: #3FBB76 !important;
}
.box-overlay, .output-shape, .option-name:before {
transition: all linear 0.50s;
-webkit-transition: all linear 0.50s;
-o-transition: all linear 0.50s;
-moz-transition: all linear 0.50s;
}
#media (max-width: 768px) {
.box-content {
margin-top: 20px;
}
}
#media (min-width: 769px) {
body, html {
/* height: 100%;*/
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>CSS Shape transition </title>
</head>
<body>
<div class="box">
<input type="radio" name="radio" id="circle" checked>
<input type="radio" name="radio" id="rectangle">
<input type="radio" name="radio" id="square">
<div class="box-content">
<label for="circle">circle</label>
<label for="rectangle">Rectangle</label>
<label for="square">square</label>
<h4 class="output">
You have selected
<div class="output-shape"></div>
<span class="option-name"></span>
</h4>
</div>
<div class="box-overlay"></div>
</div>
</body>
</html>
Note: To achieve this input element need to present above to the image element.
first you need to see which radio input was checked and then perform some changes on the icon image to show the desired image : I believe you are looking for something like the code below, I haven't tested it so you may
want to tweak it a little bit..
$('.carpet-detail').on('click', 'input', changeImage);
// delegate the the listening to the form so you don't have
// to listen to every radio button, then filter only radio
function changeImage(evt){
// create a function that can receive the event object by
// providing a parameter
var imageId = evt.target.id;
// store the id of the target element in var
switch(imageId){
// a simple switch statement to see which radio was checked
case 'carpet-shape-2':
$('.carpet-icon').attr("src","carpet-shape-2.jpg");
break;
// set the correct image for the chosen radio
case 'carpet-shape-3':
$('.carpet-icon').attr("src","carpet-shape-3.jpg");
break;
case 'carpet-shape-4':
$('.carpet-icon').attr("src","carpet-shape-4.jpg");
default:
$('.carpet-icon').attr("src","default-image.jpg");
}
}

Angular JS : show text box relatively based on click on radio button and change background color of div

image
I am new to angularjs. as shown in the image , by default linkedin radio button is selected.
but when i select on facebook radio button then two textboxes appears for 1 sec and hide the linked in textbox.
when i click on linkedin button then linked in textbox should appear and other textbox should get disappear and when i click on facebook radio button then facebook textbox should appear.
here is JSFiddle
Thank You.
.social_icon_radio_toggle {
float: left;
margin-right: 20px;
}
label {
float: left;
width: 35px;
height: 35px;
overflow: hidden;
cursor: pointer !important;
margin-right: 5px;
}
span {
text-align: center;
font-size: 15px;
margin: auto;
display: block;
}
input {
position: absolute;
}
//wheather radio button is checked or not
input:checked + span {
background-color: $linked_in_bg_color;
color: #fff;
min-height: 100%;
width: 35px;
line-height: 33px;
}
input:not(:checked + span) {
background-color: #edf1f2;
color: #58666e;
}
.linkedin {
background-color: #edf1f2;
color: #58666e;
border: thin #a8a8a8 solid;
color: #a8a8a8;
line-height: 33px;
}
.facebook {
background-color: #edf1f2;
color: #58666e;
border: thin #ced9db solid;
line-height: 35px;
}
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 set_padding_0 social_icons_section">
<div class="social_icon_radio_toggle">
<label class="linkedin">
<input type="radio" name="registration_options" checked="checked" ng-click="option='linkedin'" ng-init="option='linkedin'">
<span><i class="fa fa-linkedin"></i> </span></label>
<label class="facebook">
<input type="radio" name="registration_options" ng-click="option='facebook'">
<span><i class="fa fa-facebook"></i> </span></label>
</div>
<div>
<input class="form-control margin_top_4" placeholder="www.linkedin.com/example" type="text" ng-show="option == 'linkedin'" ng-hide="option == 'facebook'">
</div>
<input class="form-control margin_top_4" placeholder="www.facebook.com/example" type="text" ng-show="option == 'facebook'" ng-hide="option == 'linkedin'">
</div>
.social_icon_radio_toggle{
float: left; margin-right: 20px;
}
label {
float:left;width:35px; height:35px;overflow:hidden;cursor: pointer !important; margin-right: 5px;}
span {text-align:center;font-size: 15px;margin:auto;display: block;}
input {position:absolute;}
//wheather radio button is checked or not
input:checked + span {background-color:$linked_in_bg_color;color:#fff; min-height: 100%; width: 35px; line-height: 33px;}
input:not(:checked + span) {background-color:#edf1f2;color:#58666e;}
.linkedin {background-color:#edf1f2;color: #58666e; border: thin #a8a8a8 solid; color: #a8a8a8;line-height: 33px;}
.facebook {background-color:#edf1f2;color: #58666e;border: thin #ced9db solid; line-height: 35px;}
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 set_padding_0 social_icons_section">
<div class="social_icon_radio_toggle">
<label class="linkedin">
<input type="radio" name="registration_options" checked="checked" ng-click="option='linkedin'" ng-init="option='linkedin'">
<span><i class="fa fa-linkedin"></i> </span></label>
<label class="facebook" >
<input type="radio" name="registration_options" ng-click="option='facebook'">
<span><i class="fa fa-facebook"></i> </span></label>
</div>
<div type="text" ng-show="option === 'linkedin'" >
<input class="form-control " placeholder="www.linkedin.com/example" >
</div>
<div ng-show="option === 'facebook'">
<input class="form-control " placeholder="www.facebook.com/example" type="text" >
</div>
</div>
Here is updated JSFiddle
Hope this helps.
You should use the directive ng-model to track the value of your 'option' property. Then set per every radio button the corresponding ng-value.
And take into account, that ng-show and ng-hide works in similar ways. It is not necessary to use both at the same time.
ng-hide = hide the element if the expression = true
ng-show = show the element if the expression = true
<label class="linkedin" >
<input type="radio" name="registration_options" ng-model="option" ng-value="'linkedin'">
<span><i class="fa fa-linkedin"></i> </span></label>
<label class="facebook" >
<input type="radio" name="registration_options" ng-value="'facebook'" ng-model="option">
<span><i class="fa fa-facebook"></i> </span></label>
<input class="form-control margin_top_4" placeholder="www.linkedin.com/example" type="text" ng-show="option == 'linkedin'">
<input class="form-control margin_top_4" placeholder="www.facebook.com/example" type="text" ng-show="option == 'facebook'">
Working Sample:
https://plnkr.co/edit/ezDAwU41vYKrw7DwWJAB

Categories