How to limit the number of selected checkboxes when click on div

How to limit the number of selected checkboxes when click on div - javascript

I'm trying to checked the check box while click on the div.But I want to limit the number of check boxes which I can select. here is my html code.
$('.block').click(function () {
$(this).find('input[type=checkbox]').prop("checked",
!$(this).find('input[type=checkbox]').prop("checked"));
$(this).css('border', '3px solid black');
});
$('input[type=checkbox]').change(function(){
if ($('input[type=checkbox]:checked').length > 3) {
$(this).prop('checked', false)
alert("allowed only 3");
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-xs-3">
<div class="block">
<input type="checkbox" class="cb-element" value="1" />
<img src="assets/img/products/1.jpg" alt="">
</div>
</div>
<!-- end pro block -->
<div class="col-xs-3">
<div class="block">
<input type="checkbox" class="cb-element" value="2" />
<img src="assets/img/products/1.jpg" alt="">
</div>
</div>
<!-- end pro block -->
<div class="col-xs-3">
<div class="block">
<input type="checkbox" class="cb-element" value="3" />
<img src="assets/img/products/1.jpg" alt="">
</div>
</div>
<!-- end pro block -->
<div class="col-xs-3">
<div class="block">
<input type="checkbox" class="cb-element" value="4" />
<img src="assets/img/products/1.jpg" alt="">
</div>
</div>
<!-- end pro block -->
<div class="col-xs-3">
<div class="block">
<input type="checkbox" class="cb-element" value="5" />
<img src="assets/img/products/1.jpg" alt="">
</div>
</div>
<!-- end pro block -->
<div class="col-xs-3">
<div class="block">
<input type="checkbox" class="cb-element" value="6" />
<img src="assets/img/products/1.jpg" alt="">
</div>
</div>
<!-- end pro block -->
<div class="col-xs-3">
<div class="block">
<input type="checkbox" class="cb-element" value="7" />
<img src="assets/img/products/1.jpg" alt="">
</div>
</div>
<!-- end pro block -->
<div class="col-xs-3">
<div class="block">
<input type="checkbox" class="cb-element" value="8" />
<img src="assets/img/products/1.jpg" alt="">
</div>
</div>
But it is not working. Can anyone help me.This answer also I take from below question.
How to limit the number of selected checkboxes?

Update
I do not myself understand why it happens this way and I will be grateful if someone can explain it to me but adding a click event to both checkbox and the div element, I noticed that that the click event was triggered on the checkbox first. In that function, I overrode the default behaviour on clicking a checkbox. This way, when the click event on the div element was triggered, the checkbox behaved as if it was not changed, and the code works as it was intended. Do notify me if there is still any unexpected behaviour.
Also, for the borders, we need the border when the checkbox is checked. So, I added a conditional block to set the border.
Old
The 'change' event is only triggered when you click on the checkbox, and not the entire div element.
If you want the alert even when you click somewhere on the body, do not use the change function. Instead, place your logic with the click function.
Updated code
/*
$('.block').click(function () {
let checkbox = $(this).find('input[type=checkbox]');
let val = checkbox.prop("checked");
checkbox.prop("checked", !val);
$(this).css('border', '3px solid black');
if ($('input[type=checkbox]:checked').length > 3) {
checkbox.prop('checked', false)
alert("allowed only 3");
}
});
*/
$('.block').click(function(event) {
let checkbox = $(this).find('input[type=checkbox]');
let val = checkbox.prop("checked");
checkbox.prop("checked", !val);
if ($('input[type=checkbox]:checked').length > 3) {
checkbox.prop('checked', false)
return alert("allowed only 3");
}
if (checkbox.prop("checked")) {
$(this).css('border', '1px solid #eee');
} else {
$(this).css('border', '');
}
});
$('input[type=checkbox]').click(function(event) {
$(this).prop("checked", !$(this).prop("checked"));
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class="col-xs-3">
<div class="block">
<input type="checkbox" class="cb-element" value="1" />
<img src="assets/img/products/1.jpg" alt="ALT">
</div>
</div>
<!-- end pro block -->
<div class="col-xs-3">
<div class="block">
<input type="checkbox" class="cb-element" value="2" />
<img src="assets/img/products/1.jpg" alt="ALT">
</div>
</div>
<!-- end pro block -->
<div class="col-xs-3">
<div class="block">
<input type="checkbox" class="cb-element" value="3" />
<img src="assets/img/products/1.jpg" alt="ALT">
</div>
</div>
<!-- end pro block -->
<div class="col-xs-3">
<div class="block">
<input type="checkbox" class="cb-element" value="4" />
<img src="assets/img/products/1.jpg" alt="ALT">
</div>
</div>
<!-- end pro block -->
<div class="col-xs-3">
<div class="block">
<input type="checkbox" class="cb-element" value="5" />
<img src="assets/img/products/1.jpg" alt="ALT">
</div>
</div>
<!-- end pro block -->
<div class="col-xs-3">
<div class="block">
<input type="checkbox" class="cb-element" value="6" />
<img src="assets/img/products/1.jpg" alt="ALT">
</div>
</div>
<!-- end pro block -->
<div class="col-xs-3">
<div class="block">
<input type="checkbox" class="cb-element" value="7" />
<img src="assets/img/products/1.jpg" alt="ALT">
</div>
</div>
<!-- end pro block -->
<div class="col-xs-3">
<div class="block">
<input type="checkbox" class="cb-element" value="8" />
<img src="assets/img/products/1.jpg" alt="ALT">
</div>
</div>
</div>

Have a look at this. Your block highlighting and check box selection is not in sync.
Have added the logic of limit in the parent block. Hope this helps!
$('.block').click(function () {
$(this).find('input[type=checkbox]').prop("checked", !$(this).find('input[type=checkbox]').prop("checked"));
if($(this).find('input[type=checkbox]').prop("checked"))
$(this).css('border', '3px solid black');
else
$(this).css('border', '');
if ($('input[type=checkbox]:checked').length >3) {
$(this).children(0).prop('checked', false) ; $(this).css('border','' );
alert("allowed only 3");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-xs-3">
<div class="block">
<input type="checkbox" class="cb-element" value="1" />
<img src="assets/img/products/1.jpg" alt="">
</div>
</div>
<!-- end pro block -->
<div class="col-xs-3">
<div class="block">
<input type="checkbox" class="cb-element" value="2" />
<img src="assets/img/products/1.jpg" alt="">
</div>
</div>
<!-- end pro block -->
<div class="col-xs-3">
<div class="block">
<input type="checkbox" class="cb-element" value="3" />
<img src="assets/img/products/1.jpg" alt="">
</div>
</div>
<!-- end pro block -->
<div class="col-xs-3">
<div class="block">
<input type="checkbox" class="cb-element" value="4" />
<img src="assets/img/products/1.jpg" alt="">
</div>
</div>
<!-- end pro block -->
<div class="col-xs-3">
<div class="block">
<input type="checkbox" class="cb-element" value="5" />
<img src="assets/img/products/1.jpg" alt="">
</div>
</div>
<!-- end pro block -->
<div class="col-xs-3">
<div class="block">
<input type="checkbox" class="cb-element" value="6" />
<img src="assets/img/products/1.jpg" alt="">
</div>
</div>
<!-- end pro block -->
<div class="col-xs-3">
<div class="block">
<input type="checkbox" class="cb-element" value="7" />
<img src="assets/img/products/1.jpg" alt="">
</div>
</div>
<!-- end pro block -->
<div class="col-xs-3">
<div class="block">
<input type="checkbox" class="cb-element" value="8" />
<img src="assets/img/products/1.jpg" alt="">
</div>
</div>

I found an issue with checking checkboxes. I fixed and works fine. Just change this part of your code, this :
$('.block').click(function () {
$(this).find('input[type=checkbox]').prop("checked",
!$(this).find('input[type=checkbox]').prop("checked"));
$(this).css('border', '3px solid black');
});
With this:
$('.block').click(function () {
$(this).find('input[type=checkbox]').prop("checked")
$(this).css('border', '3px solid black');
Hope this help:
updates:
Remove your change method completely. Instead that part, edit the
first portion of your script like this:
$('.block').click(function () {
if($(this).find(".cb-element").prop("checked") == true)
{
$(this).find(".cb-element").prop('checked', false);
$(this).removeAttr("style");
}
else if ($('input[type=checkbox]:checked').length >= 3)
{
//$(this).find(".cb-element").prop('checked', false);
alert("allowed only 3");
}
else
{
console.log("checked new");
$(this).prop('checked', true);
$(this).find('input[type=checkbox]').prop("checked",
!$(this).find('input[type=checkbox]').prop("checked"));
$(this).attr('style', 'border:3px solid black');
}
});

Related

Onclick mutiple switch button not working

Here I want to add multiple switch buttons on the same page. I had added but querySelector is not working. Can anyone guide me on what might be the reason the switch is not working.
allOnOffButtons = document.querySelectorAll("div.case-inner-info input");
allOnOffButtons.forEach(button => {
button.addEventListener('click', handleVisibility);
})
function handleVisibility(e) {
// check if the button was on or off
const clickedButtonId = e.srcElement.id;
const clickedinnerDiv = e.srcElement.closest(".case-inner-info").querySelector(".inner_div");
// find all divs inside the given inner_div
const allDivsInsideInnerDiv = clickedinnerDiv.querySelectorAll("div");
// check if they should be shown or hidden
allDivsInsideInnerDiv.forEach(div => {
if (div.id === clickedButtonId) {
div.style.display = "block";
} else {
div.style.display = "none";
}
})
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="case-inner-info">
<div class="case-switch-wrap">
<div class="inner_div">
<div class="case-info" id="on">
<p> Paragrapgh1</p>
</div>
<div class="case-code-wrap" style="display: none;" id="off">
<p> Paragrapgh2</p>
</div>
</div>
<div class="case-switch">
<input type="radio" class="switch-input" id="on" checked>
<label for="on" class="switch-label switch-label-on">On</label>
<input type="radio" class="switch-input" id="off">
<label for="off" class="switch-label switch-label-off">Off</label>
<span class="switch-selection"></span>
</div>
</div>
</div>
<div class="case-inner-info">
<div class="case-switch-wrap">
<div class="inner_div">
<div class="case-info" id="on1">
<p> Paragrapgh1</p>
</div>
<div class="case-code-wrap" style="display: none;" id="off1">
<p> Paragrapgh2</p>
</div>
</div>
<div class="case-switch">
<input type="radio" class="switch-input" id="on1" checked>
<label for="on1" class="switch-label switch-label-on">On</label>
<input type="radio" class="switch-input" id="off1">
<label for="off1" class="switch-label switch-label-off">Off</label>
<span class="switch-selection"></span>
</div>
</div>
</div>

The jQuery import wasn't needed, so I removed it. You can easily get the relative paths to switch your display using data-attributes (I used data-ref) instead of IDs with:
e.target.closest('.case-inner-info')
.querySelectorAll('.inner_div [data-ref]')
.forEach(i => i.style.display = i.dataset.ref === e.target.dataset.ref ? 'block' : 'none');
const handleVisibility = (e) => {
e.target.closest('.case-inner-info').querySelectorAll('.inner_div [data-ref]').forEach(i => i.style.display = i.dataset.ref === e.target.dataset.ref ? 'block' : 'none');
}
const allOnOffButtons = document.querySelectorAll("div.case-inner-info input");
allOnOffButtons.forEach(button => {
button.addEventListener('click', handleVisibility);
})
<div class="case-inner-info">
<div class="case-switch-wrap">
<div class="inner_div">
<div class="case-info" data-ref="on">
<p> Paragrapgh1</p>
</div>
<div class="case-code-wrap" style="display: none;" data-ref="off">
<p> Paragrapgh2</p>
</div>
</div>
<div class="case-switch">
<label class="switch-label switch-label-on">
<input type="radio" class="switch-input" name="switch-toggle" data-ref="on" checked>
On</label>
<label class="switch-label switch-label-off">
<input type="radio" class="switch-input" name="switch-toggle" data-ref="off">
Off</label>
<span class="switch-selection"></span>
</div>
</div>
</div>
<div class="case-inner-info">
<div class="case-switch-wrap">
<div class="inner_div">
<div class="case-info" data-ref="on">
<p> Paragrapgh1</p>
</div>
<div class="case-code-wrap" style="display: none;" data-ref="off">
<p> Paragrapgh2</p>
</div>
</div>
<div class="case-switch">
<label class="switch-label switch-label-on">
<input type="radio" class="switch-input" name="switch-toggle" data-ref="on" checked>
On</label>
<label class="switch-label switch-label-off">
<input type="radio" class="switch-input" name="switch-toggle" data-ref="off">
Off</label>
<span class="switch-selection"></span>
</div>
</div>
</div>

jquery .last() firing multiple times when clicking last element only once

I have some tabs with radio buttons in them and want to check when the last option is clicked (by that I mean any radio button in the last tab, not the last radio button).
This is my html:
<div id="smartwizard" class="sw-main sw-theme-default">
<ul class="nav nav-tabs step-anchor">
<li class="optietabs nav-item done">
<a href="#step-0" class="nav-link">Lijmlaag
<button class="infotooltip" data-tooltip="lijmlaag is gewoon een dikke laag lijm">
<i class="fas fa-info-circle"></i></button></a>
<div id="step-0" class="" style="display: none;">
<form class="" id="step__form" method="post">
<div class="tab-content2">
<input type="radio" id="Wit-Lijmlaag" name="Lijmlaag" value="Wit(prijsberekening)($m2*4);">
<label for="Wit-Lijmlaag">
<div class="afwerking-tab">
<img class="materiaal-image" src="assets/images/custom/noimgstep.jpg" alt="Wit">
<p><strong>Wit</strong></p>
</div>
</label>
<input type="radio" id="Grijs-Lijmlaag" name="Lijmlaag" value="Grijs(prijsberekening)($stuksprijs+15);">
<label for="Grijs-Lijmlaag">
<div class="afwerking-tab">
<img class="materiaal-image" src="assets/images/custom/noimgstep.jpg" alt="Grijs">
<p><strong>Grijs</strong></p>
</div>
</label>
</div>
</form>
</div>
</li>
<li class="optietabs nav-item done">
<a href="#step-1" class="nav-link">Laminaat
<button class="infotooltip" data-tooltip="Test test test test ">
<i class="fas fa-info-circle"></i></button></a>
<div id="step-1" class="" style="display: none;">
<form class="" id="step__form" method="post">
<div class="tab-content2">
<input type="radio" id="Anti-slip laminaat-Laminaat" name="Laminaat" value="Anti-slip laminaat(prijsberekening)($o*5);">
<label for="Anti-slip laminaat-Laminaat">
<div class="afwerking-tab">
<img class="materiaal-image" src="assets/images/custom/noimgstep.jpg" alt="Anti-slip laminaat">
<p><strong>Anti-slip laminaat</strong></p>
</div>
</label>
<input type="radio" id="Glans laminaat-Laminaat" name="Laminaat" value="Glans laminaat(prijsberekening)($m2*4);">
<label for="Glans laminaat-Laminaat">
<div class="afwerking-tab">
<img class="materiaal-image" src="assets/images/custom/noimgstep.jpg" alt="Glans laminaat">
<p><strong>Glans laminaat</strong></p>
</div>
</label>
<input type="radio" id="Mat laminaat-Laminaat" name="Laminaat" value="Mat laminaat(prijsberekening)($m2*4);">
<label for="Mat laminaat-Laminaat">
<div class="afwerking-tab">
<img class="materiaal-image" src="assets/images/custom/noimgstep.jpg" alt="Mat laminaat">
<p><strong>Mat laminaat</strong></p>
</div>
</label>
<input type="radio" id="Geen-Laminaat" name="Laminaat" value="Geen">
<label for="Geen-Laminaat">
<div class="afwerking-tab">
<img class="materiaal-image" src="assets/images/custom/noimgstep.jpg" alt="Geen">
<p><strong>Geen</strong></p>
</div>
</label>
</div>
</form>
</div>
</li>
<li class="optietabs nav-item active">
Afwerking
<div id="step-2" class="">
<form class="" id="step__form" method="post">
<div class="tab-content2">
<input type="radio" id="Contoursnijden-Afwerking" name="Afwerking" value="Contoursnijden(prijsberekening)($m2*30);">
<label for="Contoursnijden-Afwerking">
<div class="afwerking-tab">
<div class="ribbon ribbon-top-right">
<span>Meest gekozen</span>
</div>
<img class="materiaal-image" src="assets/images/custom/noimgstep.jpg" alt="Contoursnijden">
<p><strong>Contoursnijden</strong></p>
</div>
</label>
<input type="radio" id="Schoonsnijden-Afwerking" name="Afwerking" value="Schoonsnijden">
<label for="Schoonsnijden-Afwerking">
<div class="afwerking-tab">
<img class="materiaal-image" src="assets/images/custom/noimgstep.jpg" alt="Schoonsnijden">
<p><strong>Schoonsnijden</strong></p>
</div>
</label>
</div>
</form>
</div>
</li>
</ul>
</div>
This is my jquery function:
$("#smartwizard input:radio").on("click", function(e, anchorObject, stepNumber, stepDirection, stepPosition) {
var form_data = $("#formsid form").serialize();
$('#formaataantaltab').removeClass('formaataantal-done');
$('#formaataantaltab').addClass('formaataantal');
$.ajax({
type:'post',
url:"catalog/calcdiv.php",
data:({form_data: form_data}),
success:function(data){
var content = $( $.parseHTML(data) );
$( "#ajaxresult" ).empty().append( content );
$('#prijsonder').empty().append($('#prijs').html());
// indicate the ajax has been done, release the next step
$("#smartwizard").smartWizard("next");
}
});
$laatsteopties = $(".optietabs").last();
$($laatsteopties).on("change", function() {
console.log('last option clicked');
});
$(".optietabs").each(function(){
$(this).on("click", function() {
$([document.documentElement, document.body]).animate({
scrollTop: $(this).offset().top
}, 0);
})
});
});
Where this part is logging when a last option is clicked in the console:
$laatsteopties = $(".optietabs").last();
$($laatsteopties).on("change", function() {
console.log('last option clicked');
});
The problem is when I click one radio button, I see the console logging last option clicked multiple times, in this case 3, instead of just one time each radio button click.
Why is that? What am I doing wrong?

You added code $($laatsteopties).on("change", function() {... (1) in block $("#smartwizard input:radio").on("click", function(e, anchorObject, stepNumber, stepDirection, stepPosition) { (2), so code (1) executes three times for each radio button. You need to move code
$laatsteopties = $(".optietabs").last();
$($laatsteopties).on("change", function() {
console.log('last option clicked');
});
out of code block (2).

Show/hide images using input radio

Explanation
I'm trying to show an image (and hide the others) based in an input radio selection. It does work when without label (also, of course, without its attributes), but when adding label it won't, probably because eq($(this).index()) isn't the same as before, so it selects a different object. Both the codes are below.
Codes
with label
$(document).ready(function() {
$('#radioDiv .inputRadio').change(function() {
$('.image').hide().eq($(this).index()).show();
});
});
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="radioDiv">
<input id="colorRed" class="inputRadio" type="radio" name="typeof" />
<label for="color-1" style="color: red">Red</label>
<input id="colorYellow" class="inputRadio" type="radio" name="typeof" />
<label for="colorYellow" style="color: yellow">Yellow</label>
<input id="colorGreen" class="inputRadio" type="radio" name="typeof" />
<label for="colorGreen" style="color: green">Green</label>
</div>
<div>
<div class="image hidden red">
<img src="http://placehold.it/50x50">
</div>
<div class="image hidden yellow">
<img src="http://placehold.it/100x100">
</div>
<div class="image hidden green">
<img src="http://placehold.it/150x150">
</div>
</div>
without label
$(document).ready(function() {
$('#radioDiv .inputRadio').change(function() {
$('.image').hide().eq($(this).index()).show();
});
});
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="radioDiv">
<input id="colorRed" class="inputRadio" type="radio" name="typeof" /> Red
<input id="colorYellow" class="inputRadio" type="radio" name="typeof" /> Yellow
<input id="colorGreen" class="inputRadio" type="radio" name="typeof" /> Green
</div>
<div>
<div class="image hidden red">
<img src="http://placehold.it/50x50">
</div>
<div class="image hidden yellow">
<img src="http://placehold.it/100x100">
</div>
<div class="image hidden green">
<img src="http://placehold.it/150x150">
</div>
</div>
Thanks in advance,
Luiz.

One approach could be adding data-* attributes to the input radios to save they target image. In the next example I used the data-target attribute for hold the target image of each input radio:
$(document).ready(function()
{
$('#radioDiv .inputRadio').change(function()
{
$('.image').hide();
$($(this).data("target")).show();
});
});
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="radioDiv">
<input id="colorRed" class="inputRadio" type="radio" name="typeof" data-target=".red"/>
<label for="color-1" style="color: red">Red</label>
<input id="colorYellow" class="inputRadio" type="radio" name="typeof" data-target=".yellow"/>
<label for="colorYellow" style="color: yellow">Yellow</label>
<input id="colorGreen" class="inputRadio" type="radio" name="typeof" data-target=".green"/>
<label for="colorGreen" style="color: green">Green</label>
</div>
<div>
<div class="image hidden red">
<img src="http://placehold.it/50x50">
</div>
<div class="image hidden yellow">
<img src="http://placehold.it/100x100">
</div>
<div class="image hidden green">
<img src="http://placehold.it/150x150">
</div>
</div>

You could wrap the label around the input of which the outcome would be the same without altering the indexes.
You'll want to slightly tweak the JS too so it's using the index of the label and not the input.
$(document).ready(function() {
$('#radioDiv .inputRadio').change(function() {
$('.image').hide().eq($(this).parent().index()).show();
});
});
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="radioDiv">
<label style="color: red"><input class="inputRadio" type="radio" name="typeof" /> Red</label>
<label style="color: yellow"><input class="inputRadio" type="radio" name="typeof" /> Yellow</label>
<label style="color: green"><input class="inputRadio" type="radio" name="typeof" /> Green</label>
</div>
<div>
<div class="image hidden red">
<img src="http://placehold.it/50x50">
</div>
<div class="image hidden yellow">
<img src="http://placehold.it/100x100">
</div>
<div class="image hidden green">
<img src="http://placehold.it/150x150">
</div>
</div>

How to store all form values from slider in objects, array or json with JQuery?

I am working on custom slider form in bootstrap and jQuery, and I am able to get form field values on click on radio button, button etc. My problem is I want to store all these values in series like JavaScript objects, array or JSON etc to process all the info, but I'm unable to store these values in series to get one person's information from these fields.
My HTML code is:
<div id="carousel-personal-loan" class="carousel slide">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<div class="row per-loan-gender">
<div class="col-xs-4"></div>
<div class="col-xs-4">
<div class="row male_or_female">
<div class="quote-title" msg="Please select your gender">My gender<span class="label label-danger"></span></div>
<div class="col-xs-6 male">
<label>
<img src="1.png" />
<div>
<input type="radio" name="gender" id="male" value="male" class="next-slide">
</div>
<span>Male</span>
</label>
</div>
<div class="col-xs-6 female">
<label>
<img src="2.png" />
<div>
<input type="radio" name="gender" id="female" value="female" class="next-slide">
</div>
<span>Female</span>
</label>
</div>
</div>
</div>
<div class="col-xs-4"></div>
</div>
<div class="row nxt-prev-btn">
<div class="col-xs-4"></div>
<div class="col-xs-4">
<button type="button" class="btn btn-default next-slide">Next</button>
</div>
<div class="col-xs-4"></div>
</div>
</div>
<div class="item">
<div class="row per-loan-city">
<div class="quote-title" msg="Where do you live currently?">Where do you live currently?<span class="label label-danger"></span></div>
<div class="col-xs-1"></div>
<div class="col-xs-2">
<label>
<img src="3.png" width="130" height="130">
<div>
<input type="radio" name="livecity" id="hyderabad" value="hyderabad" class="next-slide">
</div>
<span>Hyderabad</span>
</label>
</div>
<div class="col-xs-2">
<label>
<img src="4.png" width="130" height="130">
<div>
<input type="radio" name="livecity" id="chennai" value="chennai" class="next-slide">
</div>
<span>Chennai</span>
</label>
</div>
<div class="col-xs-2">
<label>
<img src="5.png" width="130" height="130">
<div>
<input type="radio" name="livecity" id="bangalore" value="bangalore" class="next-slide">
</div>
<span>Bangalore</span>
</label>
</div>
<div class="col-xs-2">
<label>
<img src="6.png" width="130" height="130">
<div>
<input type="radio" name="livecity" id="hosur" value="hosur" class="next-slide">
</div>
<span>Hosur</span>
</label>
</div>
<div class="col-xs-2">
<label>
<img src="7" width="130" height="130">
<div>
<input type="radio" name="livecity" id="other_city" value="other city" class="next-slide">
</div>
<span>Other City</span>
</label>
</div>
<div class="col-xs-1"></div>
</div>
<div class="row nxt-prev-btn">
<div class="col-xs-2"></div>
<div class="col-xs-2"></div>
<div class="col-xs-2">
<button type="button" class="btn btn-default prev-slide">Previous</button>
</div>
<div class="col-xs-2">
<button type="button" class="btn btn-default next-slide">Next</button>
</div>
<div class="col-xs-2"></div>
<div class="col-xs-2"></div>
</div>
</div>
<div class="item" id="SalOrSelf">
<div class="row per-loan-sources">
<div class="quote-title" msg="Are You">Are You<span class="label label-danger"></span></div>
<div class="col-xs-4"></div>
<div class="col-xs-4">
<div class="row sal_or_self">
<div class="col-xs-6 male">
<label>
<img src="8.png" />
<div>
<input type="radio" name="salorself" id="salaried" value="salaried" class="next-slide">
</div>
<span>Salaried</span>
</label>
</div>
<div class="col-xs-6 female">
<label>
<img src="9.png" />
<div>
<input type="radio" name="salorself" id="selfemp" value="selfemp" class="next-slide">
</div>
<span>Self-employed</span>
</label>
</div>
</div>
</div>
<div class="col-xs-4"></div>
</div>
<div class="row nxt-prev-btn">
<div class="col-xs-3"></div>
<div class="col-xs-3">
<button type="button" class="btn btn-default prev-slide">Previous</button>
</div>
<div class="col-xs-3">
<button type="button" class="btn btn-default next-slide">Next</button>
</div>
<div class="col-xs-3"></div>
</div>
</div>
<div id="salcont"></div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-personal-loan" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-personal-loan" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
My jQuery and object create code is:
jQuery(".active input[type=radio]" ).live( "click", function() {
var getAllValues = jQuery(this).val();
alert(getAllValues); //Able to get all the values here when click on fields in slider
var getQuote = { "maleOrFemale":"MaleOrFemale", "currentCity":"YourCity", "Profession":"salOrSelf" };
getQuote.maleOrFemale = getAllValues; //Not be able to Modify value in above getQuote Object
getQuote.currentCity = getAllValues; //Not be able to Modify value in above getQuote Object
getQuote.Profession = getAllValues; //Not be able to Modify value in above getQuote Object
console.log(getQuote); //Not showing proper results as I want to modify all above objects as per form field selection
});

Try this .use with on() instead of live() And also use changeevent instead of click .Better way to create the object key from name(attr('name')) of the input tag
Working example Updated
var getQuote = { };
jQuery("input[type=radio] , select").on("change", function() { // select tag was added
$("input[type=radio]:checked ,select").each(function(a){ // selected value pass with object
getQuote[$(this).attr('name')] = jQuery(this).val();
})
console.log(getQuote);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="selected">
<option value="one">one</option>
<option value="two">two</option>
</select>
<div id="carousel-personal-loan" class="carousel slide">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<div class="row per-loan-gender">
<div class="col-xs-4"></div>
<div class="col-xs-4">
<div class="row male_or_female">
<div class="quote-title" msg="Please select your gender">My gender<span class="label label-danger"></span></div>
<div class="col-xs-6 male">
<label>
<img src="1.png" />
<div>
<input type="radio" name="gender" id="male" value="male" class="next-slide">
</div>
<span>Male</span>
</label>
</div>
<div class="col-xs-6 female">
<label>
<img src="2.png" />
<div>
<input type="radio" name="gender" id="female" value="female" class="next-slide">
</div>
<span>Female</span>
</label>
</div>
</div>
</div>
<div class="col-xs-4"></div>
</div>
<div class="row nxt-prev-btn">
<div class="col-xs-4"></div>
<div class="col-xs-4">
<button type="button" class="btn btn-default next-slide">Next</button>
</div>
<div class="col-xs-4"></div>
</div>
</div>
<div class="item">
<div class="row per-loan-city">
<div class="quote-title" msg="Where do you live currently?">Where do you live currently?<span class="label label-danger"></span></div>
<div class="col-xs-1"></div>
<div class="col-xs-2">
<label>
<img src="3.png" width="130" height="130">
<div>
<input type="radio" name="livecity" id="hyderabad" value="hyderabad" class="next-slide">
</div>
<span>Hyderabad</span>
</label>
</div>
<div class="col-xs-2">
<label>
<img src="4.png" width="130" height="130">
<div>
<input type="radio" name="livecity" id="chennai" value="chennai" class="next-slide">
</div>
<span>Chennai</span>
</label>
</div>
<div class="col-xs-2">
<label>
<img src="5.png" width="130" height="130">
<div>
<input type="radio" name="livecity" id="bangalore" value="bangalore" class="next-slide">
</div>
<span>Bangalore</span>
</label>
</div>
<div class="col-xs-2">
<label>
<img src="6.png" width="130" height="130">
<div>
<input type="radio" name="livecity" id="hosur" value="hosur" class="next-slide">
</div>
<span>Hosur</span>
</label>
</div>
<div class="col-xs-2">
<label>
<img src="7" width="130" height="130">
<div>
<input type="radio" name="livecity" id="other_city" value="other city" class="next-slide">
</div>
<span>Other City</span>
</label>
</div>
<div class="col-xs-1"></div>
</div>
<div class="row nxt-prev-btn">
<div class="col-xs-2"></div>
<div class="col-xs-2"></div>
<div class="col-xs-2">
<button type="button" class="btn btn-default prev-slide">Previous</button>
</div>
<div class="col-xs-2">
<button type="button" class="btn btn-default next-slide">Next</button>
</div>
<div class="col-xs-2"></div>
<div class="col-xs-2"></div>
</div>
</div>
<div class="item" id="SalOrSelf">
<div class="row per-loan-sources">
<div class="quote-title" msg="Are You">Are You<span class="label label-danger"></span></div>
<div class="col-xs-4"></div>
<div class="col-xs-4">
<div class="row sal_or_self">
<div class="col-xs-6 male">
<label>
<img src="8.png" />
<div>
<input type="radio" name="salorself" id="salaried" value="salaried" class="next-slide">
</div>
<span>Salaried</span>
</label>
</div>
<div class="col-xs-6 female">
<label>
<img src="9.png" />
<div>
<input type="radio" name="salorself" id="selfemp" value="selfemp" class="next-slide">
</div>
<span>Self-employed</span>
</label>
</div>
</div>
</div>
<div class="col-xs-4"></div>
</div>
<div class="row nxt-prev-btn">
<div class="col-xs-3"></div>
<div class="col-xs-3">
<button type="button" class="btn btn-default prev-slide">Previous</button>
</div>
<div class="col-xs-3">
<button type="button" class="btn btn-default next-slide">Next</button>
</div>
<div class="col-xs-3"></div>
</div>
</div>
<div id="salcont"></div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-personal-loan" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-personal-loan" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>

Each time an answer is selected you could append the answer to an object/array?
I would also suggest using the "change" event rather than click event, as it is not necessary to run the code unless the values have been changed.
You could try something like this:
var obj = {};
$('.active input[type=radio]').on("change", function(){
var $this = $(this),
$name = $this.attr("name");
obj[$name] = $this.val();
});
In doing this, you would get a result that looked something like this:
obj = {
gender: "male",
livecity: "othercity",
salorself: "selfemp"
};
In doing this, it would also allow people to go back and change their answers if you wanted to allow them to do so.

CSS/CSS3 filter content, why is it not working?

I cannot undestand why it is not working.
Basically, the idea is when you select an option it only shows the pictures related to it while the other pictures are slightly hidden.
It works perfectly if you move all the inputs inside the div called "gallery" but for designing reasons I need all the input radios in another separate div.
How could I solve it please?
NOTE: I have tried to make it using JS but I didn't have luck
Thanks
/*Select Categorie*/
input#select-animals:checked~#gallery div:not(.animals-item),
input#select-lightning:checked~#gallery div:not(.lightning-item),
input#select-desert:checked~#gallery div:not(.desert-item) {
opacity: 0.1;
}
<h2>test</h2>
<div>
<input type="radio" id="select-all" name="button">
<label for="select-all" class="label-all">
All
</label>
<input type="radio" id="select-animals" name="button">
<label for="select-animals" class="label-animals">
Animals
</label>
<input type="radio" id="select-lightning" name="button">
<label for="select-lightning" class="label-lightning">
Lightning
</label>
<input type="radio" id="select-desert" name="button">
<label for="select-desert" class="label-desert">
Desert
</label>
</div>
<div class="gallery">
<div class="animals-item">
<img src="http://farm8.staticflickr.com/7254/7740405218_deedfa35cb_t.jpg" />
</div>
<div class="desert-item">
<img src="http://farm5.staticflickr.com/4086/4964465857_0bdbe1a84c_t.jpg" />
</div>
<div class="lightning-item">
<img src="http://farm6.staticflickr.com/5114/5858971312_0fec4bdaa0_t.jpg" />
</div>
<div class="desert-item">
<img src="http://farm8.staticflickr.com/7338/12111748274_e3319bfbd5_t.jpg" />
</div>
<div class="animals-item">
<img src="http://farm7.staticflickr.com/6206/6105317674_80f67a9a5e_t.jpg" />
</div>
<div class="desert-item">
<img src="http://farm7.staticflickr.com/6143/5951696095_c6dd89f5da_t.jpg" />
</div>
<div class="lightning-item">
<img src="http://farm4.staticflickr.com/3130/2840585154_232b19bfbd_t.jpg" />
</div>
<div class="animals-item">
<img src="http://farm9.staticflickr.com/8239/8548052436_a36e792c85_t.jpg" />
</div>
<div class="lightning-item">
<img src="http://farm1.staticflickr.com/129/390350345_a0a04a139d_t.jpg" />
</div>
</div>

For the general siblings selector ~ to work, you need to move the input's outside their div, so they become siblings with the elements you want to target.
I also changed the id selector # for the gallery rules, to class selector .
/*Select Categorie*/
input {
display: none;
}
.labels {
padding-bottom: 20px;
}
.labels label:hover {
color: red;
cursor: pointer;
}
#select-animals:checked ~ .gallery div:not(.animals-item),
#select-lightning:checked ~ .gallery div:not(.lightning-item),
#select-desert:checked ~ .gallery div:not(.desert-item) {
opacity: 0.1;
}
<h2>test</h2>
<input type="radio" id="select-all" name="button">
<input type="radio" id="select-animals" name="button">
<input type="radio" id="select-lightning" name="button">
<input type="radio" id="select-desert" name="button">
<div class="labels">
<label for="select-all" class="label-all">
All
</label>
<label for="select-animals" class="label-animals">
Animals
</label>
<label for="select-lightning" class="label-lightning">
Lightning
</label>
<label for="select-desert" class="label-desert">
Desert
</label>
</div>
<div class="gallery">
<div class="animals-item">
<img src="http://farm8.staticflickr.com/7254/7740405218_deedfa35cb_t.jpg" />
</div>
<div class="desert-item">
<img src="http://farm5.staticflickr.com/4086/4964465857_0bdbe1a84c_t.jpg" />
</div>
<div class="lightning-item">
<img src="http://farm6.staticflickr.com/5114/5858971312_0fec4bdaa0_t.jpg" />
</div>
<div class="desert-item">
<img src="http://farm8.staticflickr.com/7338/12111748274_e3319bfbd5_t.jpg" />
</div>
<div class="animals-item">
<img src="http://farm7.staticflickr.com/6206/6105317674_80f67a9a5e_t.jpg" />
</div>
<div class="desert-item">
<img src="http://farm7.staticflickr.com/6143/5951696095_c6dd89f5da_t.jpg" />
</div>
<div class="lightning-item">
<img src="http://farm4.staticflickr.com/3130/2840585154_232b19bfbd_t.jpg" />
</div>
<div class="animals-item">
<img src="http://farm9.staticflickr.com/8239/8548052436_a36e792c85_t.jpg" />
</div>
<div class="lightning-item">
<img src="http://farm1.staticflickr.com/129/390350345_a0a04a139d_t.jpg" />
</div>
</div>

Develop Reference

JavaScript is the programming language of the Web.

How to limit the number of selected checkboxes when click on div - javascript

Related

Onclick mutiple switch button not working

jquery .last() firing multiple times when clicking last element only once

Show/hide images using input radio

How to store all form values from slider in objects, array or json with JQuery?

CSS/CSS3 filter content, why is it not working?

Categories

Resources