Develop Reference

jQuery - show and hide div related to different checkbox

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>

How to add class on Foundation 6 range-slider when the slider-handle moves

Please help me. I can't addClass() or make anything happen when the slider changes, with Foundation 6 and jQuery. Help me. I want to addClass() when the value of the slider changes, so I can change the content of a span element. This is what my code looks like:
<div class="slider" data-slider data-initial-start="20" data-end="100" data-binding="true">
<span class="slider-handle" data-slider-handle role="slider" tabindex="1" aria-controls="sliderOutput2" data-start="0" data-end="10"></span>
<span class="slider-fill" data-slider-fill></span>
<input data-binding="true" type="hidden">
</div>
<span class="damn" data-n="1">Hey</span>
<span class="damn" data-n="2">Boo</span>
<span class="damn" data-n="3">You OK?</span>
And the jQuery:
var stepsof = [1, 2, 3];
$('input[type="hidden"]').on('change', function(){
$(".slider").val(valMap[ui.values[0]]);
$('span[data-n="' + $(this).val() + '"]');
$('.damn').addClass('goat');
});

since many people may happen to get stuck on this, I would like to share how this is done since I got the help I needed : ) .
<div class="slider" data-slider data-initial-start="1" data-end="3">
<span class="slider-handle" data-slider-handle role="slider" tabindex="1" aria-controls="slider_value"></span>
<span class="slider-fill" data-slider-fill></span>
<input id="slider_value" type="hidden">
</div>
And the span elements
<span class="selector-span great" data-n="1">First</span>
<span class="selector-span" data-n="2">Second</span>
<span class="selector-span" data-n="3">Third</span>
And the jQuery
$('.slider').on('moved.zf.slider', function() {
console.log($('#slider_value').val());
$('.selector-span').removeClass('logoopen');
$('.selector-span').removeClass('open');
$('.selector-span[data-n="' + $('#slider_value').val() +'"]').addClass('open');
});

If element has class and another element is empty change class on another element

I have this html structure, this is a snippet there is lots more in the same structure.
<button id="showEmpty">Press</button>
<div class="children">
<div class="package">
<span class="name"></span>
<span class="value"></span>
</div>
<div class="package array">
<span class="name"></span>
<span class="value"></span>
</div>
<div class="package">
<span class="name"></span>
<span class="value"></span>
</div>
<div class="package array">
<div class="children">
<div class="package array">
<span class="name"></span>
<span class="value"></span>
</div>
<div class="package">
<span class="name"></span>
<span class="value"></span>
</div>
<div class="package array">
<div class="children">
<div class="package array">
<span class="name"></span>
<span class="value"></span>
</div>
<div class="package array">
<span class="name"></span>
<span class="value"></span>
</div>
<div class="package">
<span class="name"></span>
<span class="value"></span>
</div>
</div>
</div>
</div>
</div>
</div>
I want to find all of the div elements with the class 'array' and then the span elements with the class 'value' within those div that dont have any content.
Those that apply I want to change the class of another span element within the div with the class 'name' to say 'empty'.
I have this code so far, but I'm not sure where to go next.
(function(){
$('#showEmpty').click(function() {
if ($('div.package').each().hasClass('array') && $('span.value').each().text().trim().length()) {
$('span.value').removeClass('name').addClass('empty');
else alert('no arrays found');
}
});
});
EDIT: I would also need to only do this where the array div's don't have children div's

One easy way is(assuming the empty span will be <span></span>, ie there is no blank content in it)
jQuery(function ($) {
$('#showEmpty').click(function () {
$('div.package.array').has('span.value:empty').find('span.name').removeClass('name').addClass('empty');
});
});
Here we finds div with classes package and array which has an empty span with class value, then find the span with class name in those div and remove and add class
If the span.value can have blank values then you can use a filter
jQuery(function ($) {
$('#showEmpty').click(function () {
$('div.package.array').filter(function () {
return $('span.value', this).text().trim().length() > 0;
}).find('span.name').removeClass('name').addClass('empty');
});
});

You can use this function:
$('.array').each(function(){
if ($(this).children('span.value').text() === "")
{
$(this).children('span.name').addClass('empty').removeClass('name');
}
});
Fiddle here

$('div.package.array > span.value').each(function () {
$('span.name').removeClass('name').addClass('empty');
});

This is how I would do it:
$('#showEmpty').click(function () {
$(".array > span.value:empty").siblings(".name").removeClass('name').addClass('empty');
});
Here is the JSFiddle demo
You can inspect-element to see the changes on button click.

You can use a code like this:
$(document).ready(function(){
$('#showEmpty').click(function() {
$('div.package span.value').each(function(){
if ($(this).val().length==0) {
$(this).parent().find('span.name').removeClass('name').addClass('empty');
}
});
});
});
Fiddle here: http://jsfiddle.net/n2o55xve/
Hope it helps.

how to hide skill div on close class click

how to hide div on object of div click
I am adding jquery path than my html code is here as it is and than after I am apply script to delete label class="main" with span and div class close1
but it's not perform
<label class="main ">
<span class="tag-value">mysql </span>
<div class="close1">X</div>
</label>
<label class="main ">
<span class="tag-value">codeigniter </span>
<div class="close1">X</div>
</label>
<label class="main ">
<span class="tag-value">ajax </span>
<div class="close1">X</div>
</label>
<label class="main ">
<span class="tag-value">jquery </span>
<div class="close1">X</div>
</label>
<script>
$(function(){
$(".close1").click(function(){
$(this).parent(".main").hide();
});
});
</script>

Check that JQ lib. is in the head of you r document, also, you can probably just use .parent()
http://jsfiddle.net/Yx4EU/
<script>
$(function(){
$(".close1").click(function(){
$(this).parent().hide();
});
});
</script>
If this does not work, I suggest adding a fiddle for someone to look at.

Check this out: http://jsfiddle.net/8436y/1/
In this fiddle you will notice I haven't defined the parent, since it is not necessary (in this case).
http://jsfiddle.net/8436y/5/
here I have used the .closest() to define the closest class="main" , which also works ;)

jquery attr stopped working

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.