I am very much sure it was working previously but don't know why it stop working
My script
$(document).ready(function () {
var Position = $("#test .active_r").attr('value');
});
My HTML
<div id="test">
<ul>
<li>
<label>
A Shift</label><div class="color10">
<div class="color12">
<div class="color11">
<span class="radio_span" id="spanOndutyPosition0" onclick="ActiveRadioOndutyPosition(0)">
<input type="radio" class="hidden_class" name="groupsettingOnDutyPosition" id="radiosettingOnDutyPosition0"
value="A Shift"></span></div>
</div>
</div>
</li>
<li>
<label>
B Shift</label><div class="color10">
<div class="color12">
<div class="color11">
<span class="radio_span active_r" id="spanOndutyPosition1" onclick="ActiveRadioOndutyPosition(1)">
<input type="radio" class="hidden_class" name="groupsettingOnDutyPosition" id="radiosettingOnDutyPosition1"
value="B Shift"></span></div>
</div>
</div>
</li>
<li>
<label>
C Shift</label><div class="color10">
<div class="color12">
<div class="color11">
<span class="radio_span" id="spanOndutyPosition2" onclick="ActiveRadioOndutyPosition(2)">
<input type="radio" class="hidden_class" name="groupsettingOnDutyPosition" id="radiosettingOnDutyPosition2"
value="C Shift"></span></div>
</div>
</div>
</li>
<li>
<label>
D Shift</label><div class="color10">
<div class="color12">
<div class="color11">
<span class="radio_span" id="spanOndutyPosition3" onclick="ActiveRadioOndutyPosition(3)">
<input type="radio" class="hidden_class" name="groupsettingOnDutyPosition" id="radiosettingOnDutyPosition3"
value="D Shift"></span></div>
</div>
</div>
</li>
<li>
<label>
Standby</label><div class="color10">
<div class="color12">
<div class="color11">
<span class="radio_span" id="spanOndutyPosition10" onclick="ActiveRadioOndutyPosition(10)">
<input type="radio" class="hidden_class" name="groupsettingOnDutyPosition" id="radiosettingOnDutyPosition10"
value="Standby"></span></div>
</div>
</div>
</li>
</ul>
</div>
It should give me value of Position variable but its undefined, any body know why attr is not working, don't kill me if its too simple. i worked a lot on it
Element with active_r is a span... Try...
var Position = $("#test .active_r input[type=radio]").val();
Your selector in not targetting inner input(type radio) element. Try this:
$(document).ready(function () {
var Position = $("#test .active_r input").attr('value');
});
That's because the .active_r class is on a <span>, which doesn't have value attribute.
So, just target the correct element and use .val(), like:
$("#test .active_r :checked").val();
Try this way:
$(document).ready(function () {
var Position = $("#test .active_r").find('input').val();
});
Try this
$(document).ready(function () {
var Position = $("#test .active_r").find('input').attr('value');
alert(Position)
});
DEMO
I think you are trying to get value of radio button inside span having class active_r .
Because there is no value attribute on span having class active_r
if i am right then try this:
$(document).ready(function () {
var Position = $("#test .active_r input[type=radio]").attr('value');
// OR
var Position = $("#test .active_r input[type=radio]").val();
});
This might help you.
Related
Hello I'm fairly new to jQuery (and stackoverflow), i saw a few questions about showing/hiding div for checkbox but i couldn't find a solution that apply for several checkboxes at the same time.
I would like to make it work so that when my first checkbox is checked, the 1st div/panel just after is shown then hiden when uncheck. And the same thing for my second checkbox with its own panel.
Right now, both panel are shown when first checkbox (or second checkbox) is checked.
I don't know how to make it so the panel shown or hidden will be dependant of the checkbox (li?).
I would like a solution that could apply without touching the code when adding new checkboxes, so i think maybe ID shouldn't be use, right? is there any solution?
Your help is much appreciated!
Thanks in advance!
HTML :
<ul class="form-check-list">
<li class="js-tabCheck">
<label for="coupon" class="check">
<input type="checkbox" id="coupon" class="js-tabCheck-trigger">
<span class="check__name txt-bold">COUPON</span>
<span class="txt-notice txt-indent">-50%</span>
</label>
<div class="js-tabCheck-panel">
<p>coupon detail</p>
</div>
</li>
<li class="js-tabCheck">
<label for="coupon1" class="check">
<input type="checkbox" id="coupon1" class="js-tabCheck-trigger">
<span class="check__name txt-bold">COUPON1</span>
<span class="txt-notice txt-indent">-30%</span>
</label>
<div class="js-tabCheck-panel">
<p>coupon detail</p>
</div>
</li>
</ul>
JQUERY:
$(function(){
var checkbox = $('.js-tabCheck-trigger'),
panel = $('.js-tabCheck-panel');
panel.hide();
checkbox.change(function(){
if($(this).is(':checked')){
panel.show();
} else {
panel.hide();
};
});
});
by using the children method, you can call the respective div element.
and used 'parents' to access the outside element.
$(function(){
var checkbox = $('.js-tabCheck-trigger'),
panel = $('.js-tabCheck-panel');
panel.hide();
checkbox.change(function(){
if($(this).is(':checked')){
$(this).parents('li').children('.js-tabCheck-panel').show();
} else {
$(this).parents('li').children('.js-tabCheck-panel').hide();
};
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="form-check-list">
<li class="js-tabCheck">
<label for="coupon" class="check">
<input type="checkbox" id="coupon" class="js-tabCheck-trigger">
<span class="check__name txt-bold">COUPON</span>
<span class="txt-notice txt-indent">-50%</span>
</label>
<div class="js-tabCheck-panel">
<p>coupon detail</p>
</div>
</li>
<li class="js-tabCheck">
<label for="coupon1" class="check">
<input type="checkbox" id="coupon1" class="js-tabCheck-trigger">
<span class="check__name txt-bold">COUPON1</span>
<span class="txt-notice txt-indent">-30%</span>
</label>
<div class="js-tabCheck-panel">
<p>coupon detail</p>
</div>
</li>
</ul>
I have several checkboxes when clicking on a certain checkbox, I want to show some content (in my case, this is a simple block for an example) when clicking on another checkbox, the previous block should hide and display a new block, I think to solve this problem you need to apply forEach checkboxes work for me, but I cannot display blocks
<div class="toggle-two">
<div><small>content 1</small></div>
<label class="switch-label">
<input class="switch" id="switch-novice" value="switch-novice" type="checkbox"/>
<span class="slider round"></span>
</label>
</div>
<div class="toggle-three">
<div><small>content 2</small></div>
<label class="switch-label">
<input class="switch" id="switch-intermediate" value="switch-intermediate" type="checkbox"/>
<span class="slider round"></span>
</label>
</div>
<div class="toggle-four">
<div><small>content 3</small></div>
<label class="switch-label">
<input class="switch" id="switch-expert" value="switch-expert" type="checkbox" />
<span class="slider round"></span>
</label>
</div>
<!-- ------------------------------------------- -->
</div>
<div>
<div class="content c1"></div>
<div class="content c2"></div>
<div class="content c3"></div>
</div>
**script.js**
let uploadPres = document.getElementsByClassName("content");
$(".content").each(function (index, value) {
$(`.switch:not([checked])`).on("change", function (param1, param2) {
$(".switch").not(this).prop("checked", false);
if ($(".switch").is(":checked")) {
console.log(this.checked);
}
});
});
Initially a class named content has display: none by default
You can also see this example in codesandbox
on each input checkbox add the reference of the associated content div like below.
<input class="switch" id="switch-novice" value="switch-novice" type="checkbox" data-content="c1"/>
OR
<input class="switch" id="switch-novice" value="switch-novice" type="checkbox" data-content="c2"/>
Now simply update your code like below.
$(`.switch`).on("change", function (a, b) {
$(".switch").not(this).prop("checked", false);
if ($(".switch").is(":checked")) {
var contentToOpen = $(this).data("content"); // read the associated class of the div
$(`.content`).hide(); // hide all existing opened ones
$(`.${contentToOpen}`).show(); // show the associated one
}
});
function toggle(event){
var container = event.target.closest(".togglers");
var currentContainer = event.target.closest(".toggle");
var index = Array.from(container.children).indexOf(currentContainer);
var checkboxes = document.querySelectorAll(".toggle input");
$(checkboxes).prop("checked",false);
$(event.target).prop("checked", true);
var contentItems = document.querySelectorAll(".content-items .content");
$(contentItems).hide();
var content = contentItems[index];
$(content).slideToggle();
}
.content {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="togglers">
<div class="toggle"><input type="checkbox" onclick="toggle(event)" />
toggle 1
</div>
<div class="toggle"><input type="checkbox" onclick="toggle(event)" />
toggle 2
</div>
<div class="toggle"><input type="checkbox" onclick="toggle(event)" />
toggle 3
</div>
</div>
<div class="content-items">
<div class="content">Content 1</div>
<div class="content">Content 2</div>
<div class="content">Content 3</div>
</div>
this is the code that is perfectly working in console:
jQuery(".cf7_wrap_com li").each(function(){
jQuery(this).find(".first_univer input").click(function(){
var label1 = jQuery(this).parent().find("label").html();
if( jQuery(this).is(":checked")) {
jQuery(this).parent().find(".first_high").show();
jQuery(".cf7_wrap_com li").not( jQuery(this).parent().parent() ).each(function(){
jQuery(this).find(".first_high").hide();
});
}
else {}
});
});
and the code below is what I saved in my custom js file and not working on website load
jQuery(document).ready(function( $ ){
jQuery(window).bind("load", function() {
jQuery(".cf7_wrap_com li").each(function(){
jQuery(this).find(".first_univer input").click(function(){
var label1 = jQuery(this).parent().find("label").html();
if( jQuery(this).is(":checked")) {
jQuery(this).parent().find(".first_high").show();
jQuery(".cf7_wrap_com li").not( jQuery(this).parent().parent() ).each(function(){
jQuery(this).find(".first_high").hide();
});
}
else {}
});
});
});
});
I also want to know if it is possible to trim this code as I think I might have added something which unnecessary.
I am using it on two radio buttons(which are inactive by default) and when a user clicks on either of them a short form opens.
Here's the image:
And this is the html:
<h1>What type of student?</h1>
<ul class="cf7_wrap_com first_use">
<li>
<div class="highschoolform first_univer"><input id="#school" name="School" type="radio" value="highschool" /> <label for="highschool">High School</label>
<div class="cf7_wrap_hs first_high">[contact-form-7 id="3552" title="High school"]</div>
</div>
</li>
<li>
<div class="unversityform first_univer"><input id="#University" name="School" type="radio" value="University" /> <label for="University">University</label>
<div class="cf7_wrap_uni first_high">[contact-form-7 id="3553" title="University"]</div>
</div>
</li>
</ul>
give the radios a class
use closest and siblings
$(function() {
$(".school").on("click",function() {
$(this).closest("ul").find(".first_high").hide();
$(this).siblings(".first_high").show();
});
});
.first_high { display:none }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>What type of student?</h1>
<ul class="cf7_wrap_com first_use">
<li>
<div class="highschoolform first_univer">
<input id="#school" class="school" name="School" type="radio" value="highschool" />
<label for="highschool">High School</label>
<div class="cf7_wrap_hs first_high">[contact-form-7 id="3552" title="High school"]</div>
</div>
</li>
<li>
<div class="unversityform first_univer">
<input id="#University" class="school" name="School" type="radio" value="University" />
<label for="University">University</label>
<div class="cf7_wrap_uni first_high">[contact-form-7 id="3553" title="University"]</div>
</div>
</li>
</ul>
With jquery, I want to get the rgb color code from the spzn previous to the one that was clicked.
I can get the clicks with this:
$(document).ready(function(){
$( "#myDiv :radio").click(function(){
alert("Got here");
});
});
So, how do I get the rgb code #000000 from the span with class swatchColour_1 prior to the radio button.
There are about 30 li elements for different colors. The only code I can actually change is the very first div with id="myList"
<div class="productAttributeList" id="myList" style="">
<div class="productAttributeRow xx" id="ffb492067dcd98c19b6be89e9230f4fc">
<div class="productAttributeLabel">
<label for="06b0854950dd6cc1d296718965c0d36a">
<span class="required">*</span>
<span class="name">Color choice:</span>
</label>
</div>
<div class="productAttributeValue">
<div class="productOptionPickListSwatch">
<ul>
<li class="swatch hasPreview swatchOneColour">
<label for="0780a439a3a2ec8492a8772f4f5d739a">
<span class="previewContent">
<span class="swatchColours swatchOneColour showPreview" title="Black - 070">
<span class="swatchColour swatchColour_1" style="background-color:#000000;"> </span>
</span>
</span>
<input type="radio" class="validation" name="attribute[119]" value="195" id="0780a439a3a2ec8492a8772f4f5d739a" />
<span class="name">Black - 070</span>
</label>
</li>
.
.
.
Thanks Gary
$(document).ready(function(){
$( "#myDiv :radio").click(function(){
alert($(this).prev("span.previewContent").find(".swatchColour_1").css("background-color"));
});
});
You can use .prev(), .find() and .css() methods:
$( "#myList input[type=radio]").change(function() {
var color = $(this).prev().find('.swatchColour_1').css('background-color');
});
Or using .closest() method:
var color = $(this).closest('.previewContent')
.find('.swatchColour_1')
.css('background-color');
http://api.jquery.com/
So i'm pretty new to this, please bear with me :)
And it's kinda working for me, this is what I have:
HTML:
<form id="live-search" action="" class="styled" method="post">
<fieldset>
<input type="text" class="text-input" id="filter" value="" placeholder="Søg efter skole..." />
<span id="filter-count"></span>
</fieldset>
jQuery:
$(document).ready(function(){
$("#filter").keyup(function(){
// Retrieve the input field text and reset the count to zero
var filter = $(this).val(), count = 0;
// Loop through the comment list
$(".ss_voting_manual .ss_voting_entry_list").find("li").each(function(){
// If the list item does not contain the text phrase fade it out
if ($(this).text().search(new RegExp(filter, "i")) < 0) {
$(this).fadeOut();
// Show the list item if the phrase matches and increase the count by 1
} else {
$(this).show();
count++;
}
});
// Update the count
var numberItems = count;
$("#filter-count").text("Klasser fundet = "+count);
});
});
But when I make a search it do find the li, but it lose most of the style, if you see the screenshot it will make better sense then I can do in writing.
<div id="manual_voting" class="ss_voting_manual">
<ul class="ss_voting_entry_list">
<li class="my_db_entry item_handle_22924874" id="my_db_entry_22924874" style="">
<div class="entry_title entry_details">
<h4>Koge Handelsskole - 3C</h4>
</div>
<div class="entry_photo">
<ol>
<li style="display: list-item;"><img alt="" src=
"https://d2ndy3xguswqvu.cloudfront.net/images/220405/22924874/original_89bf1593506cabda8ec9fd63ac6e35d0.png"></li>
</ol>
</div>
<div class="entry_votes entry_details">
<span class="votes">65</span> Stemmer
</div>
<div class="entry_description entry_details ss_preserve_ws"></div>
<div class="itemActions entry_actions">
<ul>
<li class="item_vote" style="display: inline;"><a class="vote_link vote"
href="#" onclick=
"SST.vote_for(widget_14972805, 22924874, this); return false;">Stem</a></li>
<li class="item_share" style="display: inline;"><a class="share_link" href=
"#" onclick="ss_share(widget_14972805, 22924874); return false;">Del med dine
venner</a></li>
</ul>
</div>
<div class="clear"></div>
</li>
<li class="my_db_entry item_handle_22924821" id="my_db_entry_22924821" style=
"display: list-item;">
<div class="entry_title entry_details">
</div>
<div class="clear"></div>
</li>
</ul>
<div class="clear"></div>
<div class="ss_voting_paging" id="paging_voting"></div>
Wrong Selector
In your target code you are searching for all the li's under .ss_voting_manual .ss_voting_entry_list including grand children.
$(".ss_voting_manual .ss_voting_entry_list").find("li")
This is causing your grandchildren li's, the one's that are wrapping the img tags, to be hidden.
Solution
Change your selector to fetch only direct descendant li's:
$(".ss_voting_manual .ss_voting_entry_list").children("li")
or
$(".ss_voting_manual .ss_voting_entry_list > li")
This will only fetch the first direct set of li's after the ul.