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 can I extract the nested value from this Javascript/HTML code?

In this code, I want to extract the value "Yes, I am a Speaker"
through Javascript DOM element. By using getElementById. But, I do not
know how to access the value as it is nested inside the list element and the list doesn't have any value and attribute. And, in this code only list has a unique id to
select this element. There are several such blocks of code with unique
list id. I would appreciate if there is a quick help. I am using
this for creating GTM custom javascript variable.
<li id="u5mH6ZV1aX21" class="container step2" style="width: 232px;">
<input type="hidden" name="value" value="Yes, I am a smoker" autocomplete="off">
<div class="letter"><span>A</span></div>
<span class="label">Yes, I am a smoker</span>
<span class="tick"></span>
<div class="aux">
<div class="bg"></div>
<div class="bd"></div>
</div>
</li>

So select the element by the class or element type
var t1 = document.querySelector("#u5mH6ZV1aX21 input").value
var t2 = document.querySelector("#u5mH6ZV1aX21 .label").textContent
console.log(t1, t2);
<ul>
<li id="u5mH6ZV1aX21" class="container step2" style="width: 232px;">
<input type="hidden" name="value" value="Yes, I am a smoker" autocomplete="off">
<div class="letter"><span>A</span></div>
<span class="label">Yes, I am a smoker</span>
<span class="tick"></span>
<div class="aux ">
<div class="bg"></div>
<div class="bd"></div>
</div>
</li>
</ul>

You can use the modern querySelector API to select a specific element using the fact that you know the unique ID and the type (or "tagName") of the child element you're trying to access.
MDN article on querySelector
document.querySelector("#u5mH6ZV1aX21 input").value

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 ;)

How to show particular div id on the page using jquery?

I want to show a particular div with particular id on the page. I am able to show the div with class information but when I try to access it by giving div id then it is not working, this is how am trying to access it from javascript.
if((document.getElementById("apMain.stageId").value) == "11"){
doShow();
}else{
alert('else');
}
function doShow(){
$(".bill_info").show();
}
I want to access div with id= stg_Pdel, I have tried using
function doShow(){
$('#stg_Pdel').show();
}
but am not able to get the div open on the page, what should be the right approach of doing it ?
My div is:
<div class="bill_info">
<h3>Additional required fields</h3>
<div id="stg_install">
<div class="row">
<span class="label">
<form:label path="billingInfo.otc" cssClass="normalText" cssErrorClass="normalTextRed" >OTC:</form:label>
</span>
<span class="formw">
<form:input path="billingInfo.otc" cssClass="normalField" cssErrorClass="validationError" size="25" disabled='true'/>
</span>
<span class="error">Values for all charge fields must be numeric.</span>
</div>
</div>
<div id="stg_Pdel">
<div class="row">
<span class="label">
<form:label path="billingInfo.priceId" cssClass="normalText" cssErrorClass="normalTextRed" >Price Type:</form:label>
</span>
<span class="formw">
<form:select path="billingInfo.priceId" cssErrorClass="validationError" disabled='true'>
<form:options items="${priceTypes}" itemValue="key" itemLabel="value" />
</form:select>
</span>
</div>
</div>
<div id='stg_closed'>
<div class="row">
<span class="label">
<form:label path="billingInfo.billingClassId" cssClass="normalText" cssErrorClass="normalTextRed" >Billing:</form:label>
</span>
<span class="formw">
<form:select path="billingInfo.billingClassId" cssErrorClass="validationError" disabled='true'>
<form:option value="" label="--Select--" />
<form:options items="${billingTypes}" itemValue="key" itemLabel="value" />
</form:select>
</span>
</div>
</div>
<div style="clear:both"></div><br/>
</div>

You're missing a closing </div> tag right before that one, so it's inside the previous one ("stg_install"). An outer "display: none" will override (sort-of) the "display: block" (or whatever) on the inner <div>.
If it's not the <div> nesting issue that was present in the initial post of the question, then perhaps there's a hint of the problem where you mention showing the <div> with class "bill_info". If that whole thing is currently not showing, then calling .show() on another <div> (the "stg_Pdel" <div>) will have no effect. Again, the outer block will hide it no matter what it's "display" style is set to.
If the ".bill_info" <div> is hidden, you need to do something like this:
function doShow(stage) {
$('.bill_info').show()
.children('div').hide().end()
.find('#' + stage).show();
}
You'd pass "doShow" either "stg_Pdel", "stg_install", or "stg_closed", and it would make sure one of those inner <div> elements is showing. edit for more detail — The idea is to do the following things:
Make sure that the over all "bill_info" block is visible;
Find the immediate child <div> elements and hide them all;
Find the target "stg" <div> and make it visible
Note that using .find() is not really necessary because you're searching by "id" value, but it should work.
If you need the function to work on more than one stage, you could do it like this:
function doShow() {
$('.bill_info').show()
.children('div').hide();
for (var ac = 0; ac < arguments.length; ++ac) {
var stg = arguments[ac];
$('#' + stg).show();
}
}

How to use jQuery to assign a class to only one radio button in a group when user clicks on it?

I have the following markup. I would like to add class_A to <p class="subitem-text"> (that holds the radio button and the label) when user clicks on the <input> or <label>.
If user clicks some other radio-button/label in the same group, I would like to add class_A to this radio-button's parent paragraph and remove class_A from any other paragraph that hold radio-buttons/labels in that group. Effectively, in each <li>, only one <p class="subitem-text"> should have class_A added to it.
Is there a jQuery plug-in that does this? Or is there a simple trick that can do this?
<ul>
<li>
<div class="myitem-wrapper" id="10">
<div class="myitem clearfix">
<span class="number">1</span>
<div class="item-text">Some text here </div>
</div>
<p class="subitem-text">
<input type="radio" name="10" value="15" id="99">
<label for="99">First subitem </label>
</p>
<p class="subitem-text">
<input type="radio" name="10" value="77" id="21">
<label for="21">Second subitem</label>
</p>
</div>
</li>
<li>
<div class="myitem-wrapper" id="11">
<div class="myitem clearfix">
<span class="number">2</span>
<div class="item-text">Some other text here ... </div>
</div>
<p class="subitem-text">
<input type="radio" name="11" value="32" id="201">
<label for="201">First subitem ... </label>
</p>
<p class="subitem-text">
<input type="radio" name="11" value="68" id="205">
<label for="205">Second subitem ...</label>
</p>
<p class="subitem-text">
<input type="radio" name="11" value="160" id="206">
<label for="206">Third subitem ...</label>
</p>
</div>
</li>
</ul>

DEMO: http://jsbin.com/ebaye3
since you are putting all inside P you can use it!
$(function($) {
$('.subitem-text').click(function() {
$(this).parent().find('.subitem-text').removeClass('class_A');
if ( $(this).children(':radio').is(':checked') ) // for sake! ;-)
$(this).addClass('class_A');
});
//you can also write it like this:
$('.subitem-text :radio').click(function() {
$(this).parent().parent().children().removeClass('class_A');
if ( $(this).is(':checked') )
$(this).parent().addClass('class_A');
});
});

You can do something like this:
// find all the radio inputs inside a subitem-text
$('.subitem-text input[type=radio]').bind('change', function() {
// find our parent LI
var $li = $(this).closest('li');
// remove any "class_A"
$li.find('.class_A').removeClass('class_A');
// find the subitem with the checked input and add "class_A"
$li.find('.subitem-text:has(input[checked])').addClass('class_A');
});
jsbin preview/demo

Like this:
$(':radio').click(function() {
$(this).closest('ul').find('.subitem-text').removeClass('active');
$(this).closest('.subitem-text').addClass('active');
});

There is no set way to do this since it is dependent on the html in your document. The simplest way to do this is to bind to each of your radio input elements but you can also use event delegation and bind to the div.myitem-wrapper, li, parent ul or event body tag.
Just binding click handlers to each of the input elements we are interested in:
$("div.myitem-wrapper input[type=radio]").bind('change', function (event) {
$(event.target).is(':checked').closest('p')
.addClass('class_A')
.siblings('p.subitem-text').removeClass('class_A');
});
Same thing but using event delegation to reduce the number of handlers to one. This can really speed things up if you find that you are binding to a large number of elements.
$("#id_of_the_parent_UL").bind('change', function (event) {
var $target = $(event.target);
if ($target.is('input[type=radio]:checked')) {
$target.closest('p')
.addClass('class_A')
.siblings('p.subitem-text').removeClass('class_A');
}
});
Note that it is perfectly valid to say $(this) instead of $(event.target) but it will give different results if and when you start moving to event delegation. An added advantage is that it will be easier for you or the next guy to understand the code in in two months if you go with event.target.