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 show the hidden content in jquery?

I want to hide all the content and show some content as the user click.
In anchor tag I used 'scr' before its id example: scrhome_screen.
But in div tag that I want to show has id home_screen.
Please explain why it is not working?
hideAll();
showTab("home_screen");
$(document).ready(function() {
$("a").click(function() {
var id = $(this).attr('id');
if(id.substring(0, 3)=="scr"){
hideAll();
showTab(id.substring(3,id.length));
}
});
});
function hideAll(){
$('#home_screen').hide();
$('#sec_screen').hide();
$('#third_screen').hide(); //this is working
// document.getElementById("home_screen").style.display = "none";
// document.getElementById("sec_screen").style.display = "none";
// document.getElementById("third_screen").style.display = "none";
}
function showTab(divName){
console.log(divName);
$('#'+divName).show(); // it think this line is not working
}
----------edit-------------------
my html code
hideAll();
showTab("home_screen");
$(document).ready(function() {
$("a").click(function() {
var id = $(this).attr('id');
if(id.substring(0, 3)=="scr"){
hideAll();
showTab(id.substring(3,id.length));
}
});
});
function hideAll(){
$('#home_screen').hide();
$('#sec_screen').hide();
$('#third_screen').hide(); //this is working
// document.getElementById("home_screen").style.display = "none";
// document.getElementById("sec_screen").style.display = "none";
// document.getElementById("third_screen").style.display = "none";
}
function showTab(divName){
console.log(divName);
$('#'+divName).show(); // it think this line is not working
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Slabo+27px" rel="stylesheet">
<!-- MENU STARTS HERE -->
<ul id="menu">
<li><a href="#" id='scrhome_screen'>Home</a></li>
<li>
New/Open Project
<ul class="hidden">
<li><a href="#" id='scrsec_screen'>New Project</a></li>
<li><a href="#" id='scrthird_screen'>Open Project</a></li>
</ul>
</li>
<li>
Region
<!-- <ul class="hidden">
<li>submenu 1</li>
<li>submenu 2</li>
<li>submenu 3</li>
</ul> -->
</li>
<li>Insurance Indices</li>
<li>Insurance Scheme</li>
<li>Help</li>
</ul>
<!-- HOME STARTS HERE -->
<div id="home_screen">
<div id="description">
<fieldset>
<p class="descriptionHead">Crop-loss Assessment Monitor Toolbox (CAM)</p>
<p id="descritionText">CAM toolbox is specifically designed to estimate prevented sowing, sowing failure and yield loss occurring in a geographical area. The tool has been also embedded with financial viability analytics which determines farmers’ premium, maximum claim,
claim ratio etc. The CAM tool can also be used to test the important indicators to assess the feasibility of an insurance scheme. Moreover, loss assessment from multiple methods also enables a comparison of risk coverage under different technologies
and their subsequent effect on the economics of the insurance scheme.</p>
</fieldset>
</div>
<hr id="ver_line" width="1" size="200">
<div id="login_signup">
<fieldset>
<p class="descriptionHead">LOGIN</p>
<form>
<p id="loginBody">
<input type="text" class="loginForm" placeholder="Login Id"><br>
<input type="password" class="loginForm" placeholder="Password"><br>
<input type="submit" class="loginButton" value="LOGIN"><br><br>
</form>
Not registered?<br>
<a id="registerBtn"><input type="button" class="loginbutton" value="Register here"></a>
<br>
</p>
</fieldset>
</div>
</div>
<!-- 2nd FIELDSETS -->
<div id="sec_screen">
<p>another content is here</p>
</div>
<!-- 3rd FIELDSETS -->
<div id="third_screen">
<p>third content is here</p>
</div>

In your code this <li><a href="#" id='scrhome_screen')>Home</a></li> paranthesis is unwanted, it may be the reason. And then again <li><a href="#" id='scrthird_screen')>Open Project</a></li>
Here is another mistake
<form>
<p id="loginBody">
<input type="text" class="loginForm" placeholder="Login Id"><br>
<input type="password" class="loginForm" placeholder="Password"><br>
<input type="submit" class="loginButton" value="LOGIN"><br><br>
</form>
Not registered?<br>
<a id="registerBtn"><input type="button" class="loginbutton" value="Register here"></a>
<br>
</p>
Tags are closed in the wrong order
Your js works, I did not change anything.
By the way in .substr you can just do id.substring(3) instead of id.substring(3,id.length)
hideAll();
showTab("home_screen");
$(document).ready(function() {
$("a").click(function() {
var id = $(this).attr('id');
if (id.substring(0, 3) == "scr") {
hideAll();
showTab(id.substring(3,id.length));
}
});
});
function hideAll() {
$('#home_screen').hide();
$('#sec_screen').hide();
$('#third_screen').hide();
}
function showTab(divName) {
$('#' + divName).show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="home_screen">home_screen</div>
<div id="sec_screen">sec_screen</div>
<div id="third_screen">third_screen</div>
home_screen
sec_screen
third_screen

framework7 - How can I keep radio button choice when reloading the page?

I am making a theme changer in my framework7 app, here is the code of color changer using radio button
<ul id="bluegr">
<label class="label-radio item-content">
<input type="radio" name="color-radio" value="blue" checked>
<div class="item-inner">
<div class="item-title">Blue</div>
</div>
</label>
</ul>
<ul id="graygr">
<label class="label-radio item-content">
<input type="radio" name="color-radio" value="gray">
<div class="item-inner">
<div class="item-title">Gray</div>
</div>
</label>
</ul>
And here is theme changer
<ul>
<li>
<label class="label-radio item-content">
<input type="radio" name="layout-radio" value="layout-dark" checked>
<div class="item-inner">
<div class="item-title">Dark</div>
</div>
</label>
</li>
<li>
<label class="label-radio item-content">
<input type="radio" name="layout-radio" value="layout-white">
<div class="item-inner">
<div class="item-title">Light</div>
</div>
</label>
</li>
</ul>
And here is the javascript of making those color and theme changer work
var myApp = new Framework7();
var $$ = Dom7;
$$('input[name="color-radio"]').on('change', function () {
if (this.checked) {
$$('.view').removeClass('theme-blue theme-gray theme-lightblue');
$$('.view').addClass('theme-' + $$(this).val());
}
});
$$('input[name="layout-radio"]').on('change', function () {
if (this.checked) {
$$('.view').removeClass('layout-dark layout-white');
$$('.view').addClass(this.value);
}
});
Demo: http://qa.ftios.net/61-2
But when I try it out, it does change the color and theme but when I reload and it reverts back to default, so how can I fix this?

You haven't stored the selection anywhere so every time you reload the page the DOM will just revert back to the original state.
The simplest way would be to save the selection to localStorage and upon that module/page being called, you simply check to see if the item exists and if it does, based on its value, you would set the theme to that.

How to link a progress bar with .click event jquery

I want to create a voting system. How can I link the .click event with the progress bar so that when a user clicks the button the progress bar updates in sync.
Here's my code
HTML
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<div class="content">
<h3 class="title">Who's better ?</h3>
<ul>
<li class="option" id="option_1" >
Messi
<p id="score_1">0</p>
<div class="progressbar_1">
</div>
<br>
</li>
<br>
<li class="option" id="option_2" >
Ronaldo
<p id="score_2">0</p>
<div class="progressbar_2"></div>
<br>
</li>
<br>
</ul>
</div>
Jquery
$('#option_1').click(function() {
$('#score_1').html(function(i, num) { return num*1+1});
});
$('#option_2').click(function() {
$('#score_2').html(function(i, num) { return num*1+1 });
});
$(function() {
$( ".progressbar_1" ).progressbar({value: 50});
});
$(function() {
$( ".progressbar_2" ).progressbar({value: 50});
});
http://jsfiddle.net/h16nhz5c/5/

You need to re-call progressbar() upon voting. Something like:
HTML:
<ul>
<li class="option" id="option_1">
Messi
<p class="score" id="score_1">0</p>
<div class="progressbar">
</div>
</li>
<li class="option" id="option_2">
Ronaldo
<p class="score" id="score_2">0</p>
<div class="progressbar">
</div>
</li>
</ul>
Javascript:
$('.option').click(function() {
var $this = $(this);
// store voting value in data-voting
if (!$this.data('voting'))
$this.data('voting', 0);
var voting = parseInt($this.data('voting'), 10);
voting++;
$this.data('voting', voting);
$this.find('.score').html(voting);
$this.find('.progressbar').progressbar({value: voting});
});
See Fiddle

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.