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>
Related
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>
My Current HTML looks like this (I do not have any control over the HTML as its SAAS, so I can add only Jquery)
What I am trying to do is something like the following image. The problem is how to (1) hide the hide buttons from the display (but it should be in the background, meaning I need to know what image was selected in the form). (2) How to Pass the image name to <div class="Show-which-image-is-selected-here"> and change the source of that image.
Here is the HTML
<div class="col-sm-8">
<div id="input-option257">
<div class="radio">
<label>
<input type="radio" name="option[257]" value="133">
<img src="black-50x50.JPG" alt="Black " class="img-thumbnail">
Black
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="option[257]" value="141">
<img src="white-50x50.jpg" alt="White " class="img-thumbnail">
White
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="option[257]" value="136">
<img src="light%20grey-50x50.JPG" alt="Light Gray " class="img-thumbnail">
Light Gray
</label>
</div>
</div>
</div>
<div class="Show-which-image-is-selected-here">
<img src="<BIGIMAGE-black-50x50.JPG" alt="Black " class="img-thumbnail">
</div>
My jquery
$('#input-option257').parent().hide();
For point 1: you can just do it with CSS or you can also do it in jQuery if you can use CSS
for point number 2 just change the src attribute for the <img> inside the click() event handler
This is a working snippet, note that I added Images:
$(document).ready(function() {
// $("input[type='radio']").style({display:none})
$("img").click(function() {
$(this)
.parent()
.find("input[type='radio']")
.prop("checked", true);
$(".Show-which-image-is-selected-here img").attr(
"src",
$(this).attr("src")
);
});
});
input[type='radio'] {
display: none;
}
<div class="col-sm-8">
<div id="input-option257">
<div class="radio">
<label>
<input type="radio" name="option[257]" value="133">
<img src="https://via.placeholder.com/100x100?text=image+1" alt="Black " class="img-thumbnail"> Black
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="option[257]" value="141">
<img src="https://via.placeholder.com/100x100?text=image+2" alt="White " class="img-thumbnail"> White
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="option[257]" value="136">
<img src="https://via.placeholder.com/100x100?text=image+3" alt="Light Gray " class="img-thumbnail"> Light Gray
</label>
</div>
</div>
</div>
<div class="Show-which-image-is-selected-here">
<img src="https://via.placeholder.com/100x100?text=image+3" alt="Black " class="img-thumbnail">
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
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');
}
});
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.
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>