I have an HTML code that contains 3 groups of radio buttons. each group has an active class in its images section. (In fact Active-1, Active-2 and Active-2 in the Image tag)
<!-------- Select Color ---------->
<div class="color-0">
<!--- Checked --->
<div>
<input type="radio" data-image="navy-blue-0" id="navy-blue-0" name="color-0" value="navy-blue-0" checked>
<label for="navy-blue-0"><span></span></label>
</div>
<div>
<input type="radio" data-image="aqua-0" id="aqua-0" name="color-0" value="aqua-0">
<label for="aqua-0"><span></span></label>
</div>
<div>
<input type="radio" data-image="pink-0" id="pink-0" name="color-0" value="pink-0">
<label for="pink-0"><span></span></label>
</div>
</div>
<div class="color-1">
<!--- Checked --->
<div>
<input type="radio" data-image="navy-blue-1" id="navy-blue-1" name="color" value="navy-blue-1" checked>
<label for="navy-blue-1"><span></span></label>
</div>
<div>
<input type="radio" data-image="aqua-1" id="aqua-1" name="color-1" value="aqua-1">
<label for="aqua-1"><span></span></label>
</div>
<div>
<input type="radio" data-image="pink-1" id="pink-1" name="color-1" value="aqua-1">
<label for="pink-1"><span></span></label>
</div>
</div>
<div class="color-2">
<!--- Checked --->
<div>
<input type="radio" data-image="navy-blue-2" id="navy-blue-2" name="color-2" value="navy-blue-2" checked>
<label for="navy-blue-2"><span></span></label>
</div>
<div>
<input type="radio" data-image="aqua-2" id="aqua-2" name="color-2" value="aqua-2">
<label for="aqua-2"><span></span></label>
</div>
<div>
<input type="radio" data-image="pink-2" id="pink-2" name="color-2" value="aqua-2">
<label for="pink-2"><span></span></label>
</div>
</div>
<!-------- Show Image ---------->
<div class="img-0">
<!--- Active-0 --->
<img class="img-fluid active-0" data-image="navy-blue-0" src="img/img-navy-blue-0.png" alt="">
<img class="img-fluid" data-image="aqua-0" src="img/img-aqua-0.png" alt="">
<img class="img-fluid" data-image="pink-0" src="img/img-pink-0.png" alt="">
<img class="img-fluid" data-image="red-0" src="img/img-red-0.png" alt="">
<img class="img-fluid" data-image="white-0" src="img/img-white-0.png" alt="">
</div>
<div class="img-1">
<!--- Active-1 --->
<img class="img-fluid active-1" data-image="navy-blue-1" src="img/img-navy-blue-1.png" alt="">
<img class="img-fluid" data-image="aqua-1" src="img/img-aqua-1.png" alt="">
<img class="img-fluid" data-image="pink-1" src="img/img-pink-1.png" alt="">
<img class="img-fluid" data-image="red-1" src="img/img-red-1.png" alt="">
<img class="img-fluid" data-image="white-1" src="img/img-white-1.png" alt="">
</div>
<div class="img-2">
<!--- Active-2 --->
<img class="img-fluid active-2" data-image="navy-blue-2" src="img/img-navy-blue-2.png" alt="">
<img class="img-fluid" data-image="aqua-2" src="img/img-aqua-2.png" alt="">
<img class="img-fluid" data-image="pink-2" src="img/img-pink-2.png" alt="">
<img class="img-fluid" data-image="red-2" src="img/img-red-2.png" alt="">
<img class="img-fluid" data-image="white-2" src="img/img-white-2.png" alt="">
</div>
The problem now is that I had to write code three times in the JavaScript:
$(document).ready(function () {
$('.color-0 input').on('click', function () {
var x = $(this).attr('data-image');
$('.active-0').removeClass('active-0');
$('.img-0 img[data-image = ' + x + ']').addClass('active-0');
$(this).addClass('active-0');
});
});
$(document).ready(function () {
$('.color-1 input').on('click', function () {
var x = $(this).attr('data-image');
$('.active-1').removeClass('active-1');
$('.img-1 img[data-image = ' + x + ']').addClass('active-1');
$(this).addClass('active-1');
});
});
$(document).ready(function () {
$('.color-2 input').on('click', function () {
var x = $(this).attr('data-image');
$('.active-2').removeClass('active-2');
$('.img-2 img[data-image = ' + x + ']').addClass('active-2');
$(this).addClass('active-2');
});
});
So I tried using loops but the code didn't work. like this:
var shoePart = [0, 1, 2, 3];
for (var i = 0; i < shoePart.length; i++) {
$(document).ready(function () {
$('.color-' + shoePart[i] + ' input').on('click', function () {
var x = $(this).attr('data-image');
$('.active-' + shoePart[i]).removeClass('active-' + shoePart[i]);
$('.img-' + shoePart[i] + ' img[data-image = ' + x + ']').addClass('active-' + shoePart[i]);
$(this).addClass('active-' + shoePart[i]);
});
});
}
You can add a common class on all three tags and an attribute of number. Then can call your jQuery on that as below:
<!-------- Select Color ---------->
<div class="color-0 common-color" attr-number="0">
<!--- Checked --->
<div>
<input type="radio" data-image="navy-blue-0" id="navy-blue-0" name="color-0" value="navy-blue-0" checked>
<label for="navy-blue-0"><span></span></label>
</div>
<div>
<input type="radio" data-image="aqua-0" id="aqua-0" name="color-0" value="aqua-0">
<label for="aqua-0"><span></span></label>
</div>
<div>
<input type="radio" data-image="pink-0" id="pink-0" name="color-0" value="pink-0">
<label for="pink-0"><span></span></label>
</div>
</div>
<div class="color-1 common-color" attr-number="1">
<!--- Checked --->
<div>
<input type="radio" data-image="navy-blue-1" id="navy-blue-1" name="color" value="navy-blue-1" checked>
<label for="navy-blue-1"><span></span></label>
</div>
<div>
<input type="radio" data-image="aqua-1" id="aqua-1" name="color-1" value="aqua-1">
<label for="aqua-1"><span></span></label>
</div>
<div>
<input type="radio" data-image="pink-1" id="pink-1" name="color-1" value="aqua-1">
<label for="pink-1"><span></span></label>
</div>
</div>
<div class="color-2 common-color" attr-number="2">
<!--- Checked --->
<div>
<input type="radio" data-image="navy-blue-2" id="navy-blue-2" name="color-2" value="navy-blue-2" checked>
<label for="navy-blue-2"><span></span></label>
</div>
<div>
<input type="radio" data-image="aqua-2" id="aqua-2" name="color-2" value="aqua-2">
<label for="aqua-2"><span></span></label>
</div>
<div>
<input type="radio" data-image="pink-2" id="pink-2" name="color-2" value="aqua-2">
<label for="pink-2"><span></span></label>
</div>
</div>
and then can call jQuery as below:
$(document).ready(function () {
$('.common-color input').on('click', function () {
var x = $(this).attr('data-image');
var elemCounter = $(this).closest(".common-color").attr("attr-number");
$('.active-'+elemCounter).removeClass('active-'+elemCounter);
$('.img-'+ elemCounter +' img[data-image = ' + x + ']').addClass('active-'+elemCounter);
$(this).addClass('active-'+elemCounter);
});
});
Hope it helps you!!
Related
What I would like to do is assign both the checked value and the click function to the radio input located inside the parent div.
I currently have this code but it only works for assigning the checked value. The click () function does not work:
<div id="contPosition">
<div class="contPosition">
<input type="radio" class="posPrint1" />
</div>
<div class="contPosition">
<input type="radio" class="posPrint2" />
</div>
<div class="contPosition">
<input type="radio" class="posPrint3" />
</div>
</div>
</div>
</div>
<div id="contPrintPosition">
<div class="contPrintPosition">
<input type="radio" class="posPrint1" />
</div>
<div class="contPrintPosition">
<input type="radio" class="posPrint2" />
</div>
<div class="contPrintPosition">
<input type="radio" class="posPrint3" />
</div>
</div>
</div>
</div>
<script>
jQuery('.contPosition').click(function () {
var val = $(this).find('input:radio').prop('checked')?false:true;
$(this).find('input:radio').prop('checked', val);
});
//THIS FUNCTION DOES NOT WORK AS EXPECTED
jQuery('.contPosition input').click(function(){
var curCls = $(this).attr('class');
$(`.contPrintPosition > input.${curCls}`).val("Test");
});
//THIS FUNCTION DOES NOT WORK AS EXPECTED
jQuery('.contPosition input[type=radio]').click(function(){
if (this.previous) {
this.checked = false;
}
this.previous = this.checked;
});
</script>
I dont know what you want to achieve exactly but only one click event could replace all the other event as below snippet :
$(function() {
//should be ".contPosition input[type=radio]"
$('.contPosition input[type=radio]').click(function(e) {
var curCls = $(this).attr('class');
$(`.contPrintPosition > input.${curCls}`).val("Test");
if (this.previous) {
this.checked = false;
}
this.previous = this.checked;
});
})
.contPrintPosition input::after {
content: attr(value);
width:100%;
margin-left:15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="contPosition">
<div class="contPosition">
<input type="radio" class="posPrint1" />
</div>
<div class="contPosition">
<input type="radio" class="posPrint2" />
</div>
<div class="contPosition">
<input type="radio" class="posPrint3" />
</div>
</div>
<div id="contPrintPosition">
<div class="contPrintPosition">
<input type="radio" class="posPrint1" />
</div>
<div class="contPrintPosition">
<input type="radio" class="posPrint2" />
</div>
<div class="contPrintPosition">
<input type="radio" class="posPrint3" />
</div>
</div>
I have script which is creating number of new inputs according to inserted value to input.
New inputs are extended with another script but this script is not working.
This script is working when appended html code is not in js but in index.html. Then this script works fine but the first script is not launched.
CODE:
$(function () {
$(".main-input1").on("change", function () {
$(".activityType1.active").removeClass("active");
var subList = $(".activityType1." + $(this).val());
if (subList.length) {
subList.addClass("active");
}
});
});
const button = document.querySelector('button');
const input = document.getElementById('NumberOfNights');
const wrapper = document.querySelector('div.wrapper-activity');
function generateItems(numOfItems) {
let html = "";
wrapper.innerHTML = "";
for(i = 1; i <= numOfItems; i++) {
html += `
<style>
.activityType1 {
display: none;
}
.activityType1.active {
display: inline-block;
}
</style>
<section class="activity-wrapper">
<label for="activity">Activity ${i}</label>
<div class="select-style">
<select id="activity" style="width: 300px;" name="activity" class='main-input1'>
<option value='none' disabled selected>--</option>
<option value='Hiking'>Hiking</option>
<option value='Biking'>Biking</option>
<option value='Tasting'>Tasting</option>
</select>
</div>
</section>
<section class='activityType1 Hiking activity-wrapper'>
<div class="bottom-row">
<label class="hiking-activity">
<input type="radio" name="hiking-activity" value="National park Pieniny">
<img src="../assets/img/3.jpg">
</label>
<label class="hiking-activity">
<input type="radio" name="hiking-activity" value="National park Slovak paradise">
<img src="../assets/img/4.jpg">
</label>
</div>
</section>
<section class='activityType1 Biking activity-wrapper'>
<div class="top-row">
<label class="biking-activity">
<input type="radio" name="biking-activity" value="National park High Tatras">
<img src="../assets/img/5.jpg">
</label>
<label class="biking-activity">
<input type="radio" name="biking-activity" value="National park Pieniny">
<img src="../assets/img/6.jpg">
</label>
</div>
</section>
<section class='activityType1 Tasting activity-wrapper'>
<div class="top-row">
<label class="tasting-activity">
<input type="radio" name="tasting-activity" value="Beer tasting">
<img src="../assets/img/10.jpg">
</label>
<label class="tasting-activity">
<input type="radio" name="tasting-activity" value="Whisky tour">
<img src="../assets/img/11.jpg">
</label>
</div>
<div class="bottom-row">
<label class="tasting-activity">
<input type="radio" name="tasting-activity" value="Tokaj wine tour">
<img src="../assets/img/12.jpg">
</label>
</div>
</section>
`;
};
return html;
};
button.addEventListener('click',() => {
const n = parseInt(input.value);
if (n) {
wrapper.innerHTML = generateItems(n);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="NumberOfNights" placeholder="--" type="number" name="nights" max="5">
<button type="button">Continue</button>
<div class="wrapper-activity"></div>
Change it to $(document).on('change', '.main-input1', function () { this way your first script can be launched on the appended code.
$(function () {
$(document).on('change', '.main-input1', function () {
$(".activityType1.active").removeClass("active");
var subList = $(".activityType1." + $(this).val());
if (subList.length) {
subList.addClass("active");
}
});
});
const button = document.querySelector('button');
const input = document.getElementById('NumberOfNights');
const wrapper = document.querySelector('div.wrapper-activity');
function generateItems(numOfItems) {
let html = "";
wrapper.innerHTML = "";
for(i = 1; i <= numOfItems; i++) {
html += `
<style>
.activityType1 {
display: none;
}
.activityType1.active {
display: inline-block;
}
</style>
<section class="activity-wrapper">
<label for="activity">Activity ${i}</label>
<div class="select-style">
<select id="activity" style="width: 300px;" name="activity" class='main-input1'>
<option value='none' disabled selected>--</option>
<option value='Hiking'>Hiking</option>
<option value='Biking'>Biking</option>
<option value='Tasting'>Tasting</option>
</select>
</div>
</section>
<section class='activityType1 Hiking activity-wrapper'>
<div class="bottom-row">
<label class="hiking-activity">
<input type="radio" name="hiking-activity" value="National park Pieniny">
<img src="../assets/img/3.jpg">
</label>
<label class="hiking-activity">
<input type="radio" name="hiking-activity" value="National park Slovak paradise">
<img src="../assets/img/4.jpg">
</label>
</div>
</section>
<section class='activityType1 Biking activity-wrapper'>
<div class="top-row">
<label class="biking-activity">
<input type="radio" name="biking-activity" value="National park High Tatras">
<img src="../assets/img/5.jpg">
</label>
<label class="biking-activity">
<input type="radio" name="biking-activity" value="National park Pieniny">
<img src="../assets/img/6.jpg">
</label>
</div>
</section>
<section class='activityType1 Tasting activity-wrapper'>
<div class="top-row">
<label class="tasting-activity">
<input type="radio" name="tasting-activity" value="Beer tasting">
<img src="../assets/img/10.jpg">
</label>
<label class="tasting-activity">
<input type="radio" name="tasting-activity" value="Whisky tour">
<img src="../assets/img/11.jpg">
</label>
</div>
<div class="bottom-row">
<label class="tasting-activity">
<input type="radio" name="tasting-activity" value="Tokaj wine tour">
<img src="../assets/img/12.jpg">
</label>
</div>
</section>
`;
};
return html;
};
button.addEventListener('click',() => {
const n = parseInt(input.value);
if (n) {
wrapper.innerHTML = generateItems(n);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="NumberOfNights" placeholder="--" type="number" name="nights" max="5">
<button type="button">Continue</button>
<div class="wrapper-activity"></div>
I want to calculate the total(sum) of all the purchases using the "+","-" to add and remove products from the shopping cart.It should display the amount on the left top corner in front of "total:".In front of each product, the total purchase of the single purchase is displayed.
Here a descriptive image
Here the html code:
<body>
<div class="shopping-cart">
<!-- Title -->
<div class="title">
Shopping Bag total :
</div>
<!-- Product #1 -->
<div class="item">
<div class="buttons">
<span class="delete-btn"></span>
<span class="like-btn"></span>
</div>
<div class="image">
<img src="item-1.png" alt="" />
</div>
<div class="description">
<span>Common Projects</span>
<span>Bball High</span>
<span>White</span>
</div>
<div class="quantity">
<button class="plus-btn" type="button" name="button"><img src="plus.svg" alt="" /></button>
<input type="text" value="0" class="input-btn" />
<button class="minus-btn" type="button" name="button"><img src="minus.svg" alt="" /></button>
</div>
<div class="total-price" id="549"><input type="number" value="0" class="result-btn" /></div>
</div>
<!-- Product #2 -->
<div class="item">
<div class="buttons">
<span class="delete-btn"></span>
<span class="like-btn"></span>
</div>
<div class="image">
<img src="item-2.png" alt=""/>
</div>
<div class="description">
<span>Maison Margiela</span>
<span>Future Sneakers</span>
<span>White</span>
</div>
<div class="quantity">
<button class="plus-btn" type="button" name="button"><img src="plus.svg" alt="" /></button>
<input type="text" value="0" class="input-btn" />
<button class="minus-btn" type="button" name="button"><img src="minus.svg" alt="" /></button>
</div>
<div class="total-price" id="270"><input type="number" value="0" class="result-btn" /></div>
</div>
<!-- Product #3 -->
<div class="item">
<div class="buttons">
<span class="delete-btn"></span>
<span class="like-btn"></span>
</div>
<div class="image">
<img src="item-3.png" alt="" />
</div>
<div class="description">
<span>Our Legacy</span>
<span>Brushed Scarf</span>
<span>Brown</span>
</div>
<div class="quantity">
<button class="plus-btn" type="button" name="button"><img src="plus.svg" alt="" /></button>
<input type="text" value="0" class="input-btn" />
<button class="minus-btn" type="button" name="button"><img src="minus.svg" alt="" /></button>
</div>
<div class="total-price" id="349"><input type="number" value="0" class="result-btn" /></div>
</div>
</div>
</body>
Here the JS code:
const items = document.querySelectorAll('.item');
items.forEach(function(item) {
const minusButton = item.querySelector('.minus-btn');
const plusButton = item.querySelector('.plus-btn');
const inputField = item.querySelector('.input-btn');
const resultField = item.querySelector('.result-btn');
minusButton.addEventListener('click', function minusProduct() {
const currentValue = Number(inputField.value);
if (currentValue > 0) {
inputField.value = currentValue - 1;
var x = item.querySelector('.total-price').id;
resultField = item.querySelector('.result-btn').value = x* inputField.value;
} else inputField.value = 0
});
plusButton.addEventListener('click', function plusProduct() {
const currentValue = Number(inputField.value);
if (currentValue < 100) {
inputField.value = currentValue + 1;
var x = item.querySelector('.total-price').id;
resultField = item.querySelector('.result-btn').value = x* inputField.value;
document.querySelector('.title').innerHTML = item.querySelector('.result-btn')[0].value
+item.querySelector('.result-btn')[1].value + item.querySelector('.result-btn')[2].value
} else inputField.value = 100
});
});
There are two thing that you need to do.
1. You need to convert value of total price and total price to number.
2. Set the innneHTML of dev other wise you will get the error. e.g. (
Uncaught TypeError: Assignment to constant variable.
at HTMLButtonElement.minusProduct)
So, in your JS
resultField.innerHTML = item.querySelector('.result-btn').value = Number(x) * Number(inputField.value);
I am attempting to set a variable limit on how many checkboxes can be set, based on a previous selection.
In my code I have an option input, where you select your choice (which is the templates and limitTemplate variables). Then I have some checkbox inputs. Let's say I chose my the option for 2 cards. Then I want to choose two checkboxes below it and then not be able to choose any additional cards.
For some reason my code is saying I am reaching the limit on my first selection, regardless of the card limit option. As you can see in my #template-number (where is says "Choose x templates from below") that I am getting the limitTemplate to work, at least at that point.
Does anyone see what I am doing wrong?
The part of the code where I am trying to restrict the limit is here:
if ($(templateCount >= limitTemplate)) {
event.preventDefault();
$('.tp-template-check[type="checkbox"]').not(':checked').prop('disabled', true);
alert("You reached your limit");
}
ps - it looks like a lot of HTML, but it is basically checkbox inputs.
Here is a fiddle in case you prefer this method.
jQuery.fn.fadeBoolToggle = function(bool) {
return bool ? this.fadeIn(400) : this.fadeOut(400);
}
$('#tp-frequency').on('change', function() {
var templates = $('#tp-frequency option:selected').val();
$('#template-number').html(templates);
// Setting limit for TP templates
$('.tp-template-check').on('change', function() {
var limitTemplate = templates;
if (!this.checked || $('.tp-template-check:checked').length <= limitTemplate) {
$(this).parents('.product-wrap:first').find('.checkmark-img').fadeBoolToggle(this.checked);
var templateCount = $('.tp-template-check:checked').length;
if ($(templateCount > 0)) {
$('#templateCount').html(templateCount + " Template" + (templateCount == 1 ? "" : "s") + " Selected");
}
if ($(templateCount >= limitTemplate)) {
event.preventDefault();
$('.tp-template-check[type="checkbox"]').not(':checked').prop('disabled', true);
alert("You reached your limit");
}
if (templateCount == limitTemplate) {
$('#templateCountComplete').fadeBoolToggle($('.tp-template-check:checked').length == limitTemplate).addClass('block');
} else if (templateCount > limitTemplate) {
$('.tp-template:checkbox').attr('checked', false);
$('#templateCountComplete').hide();
}
} else {
$('#templateCountComplete').hide();
}
}); //End of .tp-template-check func
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h2 class="section-subtitle">Choose the limit</h2>
<p class="small-description margin25">* Some choices result in more/less cards.</p>
<select id="tp-frequency" class="option-input">
<option value='' disabled selected>Please choose option</option>
<option value='5'>5 cards</option>
<option value='3'>3 cards</option>
<option value='2'>2 cards</option>
</select>
<div id="tp-template-section">
<!-- Template Section -->
<h2 class="section-subtitle">Choose <span id="template-number"></span> templates from below.</h2>
<p id="test2"></p>
<p id="templateCount"></p>
<div id="templateCountComplete"><img src="images/checkmark.png" alt="Template Selection Complete" id="templateCountImg"></div>
<div id="tp-template-wrap">
<div class="tp-template">
<div class="product-wrap">
<label for="tp-winter" class="package-check-toggle">
<h4 class="tp-template-title">Winter</h4>
<img src="images/tp-winter.png" class="tp-template-img">
<img src="images/checkmark-circle.png" class="checkmark-img total-center">
</label>
<input type="checkbox" class="tp-template-check" data-template="Winter" data-template-image="<img src='images/tp-winter.png' class='review-img'>" id="tp-winter" value="Winter">
</div>
</div>
<div class="tp-template">
<div class="product-wrap">
<label for="tp-spring" class="package-check-toggle">
<h4 class="tp-template-title">Spring</h4>
<img src="images/tp-spring.png" class="tp-template-img">
<img src="images/checkmark-circle.png" class="checkmark-img total-center">
</label>
<input type="checkbox" class="tp-template-check" data-template="Spring" data-template-image="<img src='images/tp-spring.png' class='review-img'>" id="tp-spring" value="Spring">
</div>
</div>
<div class="tp-template">
<div class="product-wrap">
<label for="tp-summer" class="package-check-toggle">
<h4 class="tp-template-title">Summer</h4>
<img src="images/tp-summer.png" class="tp-template-img">
<img src="images/checkmark-circle.png" class="checkmark-img total-center">
</label>
<input type="checkbox" class="tp-template-check" data-template="Summer" data-template-image="<img src='images/tp-summer.png' class='review-img'>" id="tp-summer" value="Summer">
</div>
</div>
<div class="tp-template">
<div class="product-wrap">
<label for="tp-fall" class="package-check-toggle">
<h4 class="tp-template-title">Fall</h4>
<img src="images/tp-fall.png" class="tp-template-img">
<img src="images/checkmark-circle.png" class="checkmark-img total-center">
</label>
<input type="checkbox" class="tp-template-check" data-template="Fall" data-template-image="<img src='images/tp-fall.png' class='review-img'>" id="tp-fall" value="Fall">
</div>
</div>
<div class="tp-template">
<div class="product-wrap">
<label for="tp-newYears" class="package-check-toggle">
<h4 class="tp-template-title">New Years</h4>
<img src="images/tp-newYears.png" class="tp-template-img">
<img src="images/checkmark-circle.png" class="checkmark-img total-center">
</label>
<input type="checkbox" class="tp-template-check" data-template="New Years" data-template-image="<img src='images/tp-newYears.png' class='review-img'>" id="tp-newYears" value="New Years">
</div>
</div>
<div class="tp-template">
<div class="product-wrap">
<label for="tp-independence" class="package-check-toggle">
<h4 class="tp-template-title">Independence Day</h4>
<img src="images/tp-independence.png" class="tp-template-img">
<img src="images/checkmark-circle.png" class="checkmark-img total-center">
</label>
<input type="checkbox" class="tp-template-check" data-template="Independence Day" data-template-image="<img src='images/tp-independence.png' class='review-img'>" id="tp-independence" value="Independence Day">
</div>
</div>
<div class="tp-template">
<div class="product-wrap">
<label for="tp-thanksgiving" class="package-check-toggle">
<h4 class="tp-template-title">Thanksgiving</h4>
<img src="images/tp-thanksgiving.png" class="tp-template-img">
<img src="images/checkmark-circle.png" class="checkmark-img total-center">
</label>
<input type="checkbox" class="tp-template-check" data-template="Thanksgiving" data-template-image="<img src='images/tp-thanksgiving.png' class='review-img'>" id="tp-thanksgiving" value="Thanksgiving">
</div>
</div>
Some of your if statement conditions seem to be incorrect. You encased the conditions like they were jQuery selectors.
Change this:
if ($(templateCount > 0)) {
...
}
if ($(templateCount >= limitTemplate)) {
...
}
To this:
if (templateCount > 0) {
...
}
if (templateCount >= limitTemplate) {
...
}
My first question here. I have two option groups, when I use the selected option of two groups, I expect the page to show result div ( without the page reloading )
My code is below
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<img src="https://placehold.it/220x120" class="img-responsive img-rounded">
<input type="radio" name="location" vaule="vn" checked>Viet Nam
</label>
<label class="btn btn-default">
<img src="https://placehold.it/220x120" class="img-responsive img-rounded">
<input type="radio" name="location" vaule="us">US
</label>
<label class="btn btn-default">
<img src="https://placehold.it/220x120" class="img-responsive img-rounded">
<input type="radio" name="location" vaule="eu">Europe
</label></div>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<img src="https://placehold.it/220x120" class="img-responsive img-rounded">
<input type="radio" name="type" vaule="bikers" checked>bikers
</label>
<label class="btn btn-default">
<img src="https://placehold.it/220x120" class="img-responsive img-rounded">
<input type="radio" name="type" vaule="cars">cars
</label>
<label class="btn btn-default">
<img src="https://placehold.it/220x120" class="img-responsive img-rounded">
<input type="radio" name="type" vaule="planes">planes
</label>
</div>
I want, eg location == vn AND type == biker ==> replace div id=result by div id=vnbiker
or if location == eu AND type = cars ==> replace div id=result by div id=eunotplanes
When any radio button is changed, the result div should change too (without a page reload).
is this what you're looking for? http://jsfiddle.net/swm53ran/60/
i added <div id="result">vn + bikers</div> to the html
js:
$(document).ready(function() {
$('input:radio').on('change', function() {
var resultArray = [];
$('input:radio').each(function() {
if ($(this).is(':checked') == true) {
resultArray.push($(this).val());
}
});
$('#result').html(resultArray[0] + ' + ' + resultArray[1]); //or whatever you want to put here
});
});
pretty much what the js is doing is on change of any radio button, it searches through and finds the checked radio buttons and pushes their values into an array, then it puts those two values in div with id="result".
**also note: in your markup, you spelled value wrong ("vaule" is how its spelled in the question for all 6 radio button inputs).
hope this helps!
EDIT: to help you with your new requirements, i created a loop which iterates through the result array i previously set up. see demo: http://jsfiddle.net/swm53ran/68/
different code:
var html = '';
for (var i = 0; i < resultArray.length; i++) {
if (i == 0) {
html += resultArray[0];
}
else {
html += ' + ' + resultArray[i];
}
}
$('#result').html(html);
I made some modifications to your code, and added the necessary to make it a full HTML file, here it is:
<html>
<head>
<script type="text/javascript">
function clk () {
if ( ( document.getElementById("vn").checked == true ) &&
( document.getElementById("bk").checked == true ) )
{ document.getElementById("result").style.cssText =
document.getElementById("vnbiker").style.cssText;
document.getElementById("result").innerHTML =
document.getElementById("vnbiker").innerHTML;
return;
}
if ( ( document.getElementById("eu").checked == true ) &&
( document.getElementById("cr").checked == true ) )
{ document.getElementById("result").style.cssText =
document.getElementById("eunotplanes").style.cssText;
document.getElementById("result").innerHTML =
document.getElementById("eunotplanes").innerHTML;
}
}
</script>
</head>
<body>
<div id="vnbiker" style="background-color:green;">div vnbiker</div>
<div id="eunotplanes" style="background-color:orange;">div eunotplanes</div>
<!-- ABOVE IS MY NEW CODE -->
<!-- BELOW IS YOUR CODE, I ADDED "ID" AND "ONCLICK" TO RADIOBUTTONS -->
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<img src="https://placehold.it/220x120" class="img-responsive img-rounded">
<input type="radio" name="location" value="vn" id="vn" onclick="clk();">Viet Nam
</label>
<label class="btn btn-default">
<img src="https://placehold.it/220x120" class="img-responsive img-rounded">
<input type="radio" name="location" value="us" checked id="us" onclick="clk();">US
</label>
<label class="btn btn-default">
<img src="https://placehold.it/220x120" class="img-responsive img-rounded">
<input type="radio" name="location" value="eu" id="eu" onclick="clk();">Europe
</label></div>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<img src="https://placehold.it/220x120" class="img-responsive img-rounded">
<input type="radio" name="type" value="bikers" checked id="bk" onclick="clk();">bikers
</label>
<label class="btn btn-default">
<img src="https://placehold.it/220x120" class="img-responsive img-rounded">
<input type="radio" name="type" value="cars" id="cr" onclick="clk();">cars
</label>
<label class="btn btn-default">
<img src="https://placehold.it/220x120" class="img-responsive img-rounded">
<input type="radio" name="type" value="planes" id="pl" onclick="clk();">planes
</label>
</div>
<!-- BELOW CODE IS MINE -->
<div id="result" style="background-color:magenta;">div result</div>
</body>
</html>