We Keep Coding

Get the value of checkboxes in a specific section using javascipt

I have a page that contain different section these section appear when the user click on li an active class is added to the section and then this section appear
each section contain a box with checkboxes and a link to another page when i click on this link i should store the value of the checkboxes for the section active only to print them later
all the code work fine but my problem is that i only can have the checkbox value for the first section that contain active class by defaul
how can i solve that please?
/*Put active class on li click for section*/
let tabs = document.querySelectorAll(".nav li");
let tabsArray = Array.from(tabs);
let section = document.querySelectorAll(".section");
let sectionArray = Array.from(section);
tabsArray.forEach((ele) => {
ele.addEventListener("click", function (e) {
tabsArray.forEach((ele) => {
ele.classList.remove("active");
});
e.currentTarget.classList.add("active");
sectionArray.forEach((sec) => {
sec.classList.remove("active");
});
document.querySelector('#' + e.currentTarget.dataset.cont).classList.add("active");
});
});
/*put the check box value in localstorage to print them later*/
let printBtn = document.querySelector(".active .btn-print");
let terms = document.querySelectorAll(".active input[type='checkbox']");
let termsValChecked = [];
let termsValUnChecked = [];
printBtn.addEventListener("click", function (e) {
localStorage.removeItem("termschecked");
localStorage.removeItem("termsunchecked");
for (let i = 0; i < terms.length; i++) {
if (terms[i].checked == true) {
termsValChecked.push(terms[i].value);
} else {
termsValUnChecked.push(terms[i].value);
}
}
window.localStorage.setItem("termschecked", JSON.stringify(termsValChecked));
window.localStorage.setItem("termsunchecked", JSON.stringify(termsValUnChecked));
});
.box {
display: flex;
align-items: center;
}
section {
display: none;
}
section.active {
display: block;
}
.nav {
list-style:none;
display: flex;
align-items: center;
}
.nav li {
padding: 20px;
background-color: #ccc;
margin-left: 2px;
cursor: pointer;
}
<ul class="nav">
<li data-cont="r1">1</li>
<li data-cont="r2">2</li>
<li data-cont="r3">3</li>
</ul>
<section class="section section-one active" id="r1">
<h3>Section 1</h3>
<div class="box">
<input type="checkbox" value="test1">
<p>test1</p>
</div>
<div class="box">
<input type="checkbox" value="test2">
<p>test2</p>
</div>
<div class="print">
Print
</div>
</section>
<section class="section section-two" id="r2">
<h3>Section 2</h3>
<div class="box">
<input type="checkbox" value="test3">
<p>test3</p>
</div>
<div class="box">
<input type="checkbox" value="test4">
<p>test4</p>
</div>
<div class="print">
Print
</div>
</section>
<section class="section section-three" id="r3">
<h3>Section 3</h3>
<div class="box">
<input type="checkbox" value="test5">
<p>test5</p>
</div>
<div class="box">
<input type="checkbox" value="test6">
<p>test6</p>
</div>
<div class="print">
Print
</div>
</section>

querySelectorAll returns a static NodeList, i.e. the list will reflect the state at invocation and won't update if the page later changes.
The following line runs when you initialize your page:
let terms = document.querySelectorAll(".active input[type='checkbox']");
And that's why you always capture the first section in local storage.
You need to move this line inside your click handler so that you enumerate the checkboxes inside the .active section at that time.

Remove the Attribute ".change" from your selector on line 23
simply change
let terms = document.querySelectorAll(".active input[type='checkbox']");
to
let terms = document.querySelectorAll("input[type='checkbox']");

Hide specific H2 tags from page if specific radio button is checked by default or selected later

I cannot edit the HTML part!
I must to hide the specific H2 tags if radio button "input#existing-company" is checked by default or selected later.
I put CSS as commented code, because I bet CSS pure solution is not possible in this scenario.
Please be kind, I'm not familiar with JavaScript and jQuery.
<script type="text/javascript">
$(document).ready(function() {
$('input#existing-company').click(function() {
if($(this).attr('id') == 'existing-company') {
$('#existing-company').show();
}
else {
$('#existing-company').hide();
}
});
});
</script>
/* CSS pure solution I bet is not possible
input#existing-company:checked ~ h2 {
display: none;
}
input#existing-company:checked + h2 {
display: none;
}
input#existing-company:checked > h2 {
display: none;
}
input#existing-company:checked+label ~ h2 {
display: none;
}
input#existing-company:checked+label + h2 {
display: none;
}
input#existing-company:checked+label > h2 {
display: none;
}
*/
<div class="one">
<div class="fieldset new-company"><input type="radio" name="company_submission" id="new-company" value="new_company" class="company-selection-radio" checked=""><label for="new-company">New Company</label></div>
<div class="fieldset existing-company"><input type="radio" name="company_submission" id="existing-company" value="existing_company" class="company-selection-radio"><label for="existing-company">Existing Company</label></div>
<h2 id="comp_desired_section">Desired section 1</h2>
<h2 id="comp_section_two">Desired section 2</h2>
<h2 id="comp_desired_three">Desired section 3</h2>
</div>

You can check whether the radio button is checked with the :checked pseudo class.
$('#existing-company').on('change', checkInput)
function checkInput(){
if($('#existing-company').is(':checked')) $('h2').hide()
}
checkInput() //if it is checked by default
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="one">
<div class="fieldset new-company"><input type="radio" name="company_submission" id="new-company" value="new_company" class="company-selection-radio" checked=""><label for="new-company">New Company</label></div>
<div class="fieldset existing-company"><input type="radio" name="company_submission" id="existing-company" value="existing_company" class="company-selection-radio"><label for="existing-company">Existing Company</label></div>
<h2 id="comp_desired_section">Desired section 1</h2>
<h2 id="comp_section_two">Desired section 2</h2>
<h2 id="comp_desired_three">Desired section 3</h2>
</div>

Adding class names on hover based on conditions

I've created a tabbed module which works by getting content that is in the .content div (which is hidden) and displaying it in a empty div called .overview.
The idea behind this tabbed module is that, on hover (or when class active exists), the content on the right will change based on what header is being selected from the left. I.e. If I hover over a header named "Red", the .overview div on the right will spit out "red".
However, the issues I'm having are the following:
In the demo below, don't hover on any of the headers. The .overview div has no content - which is obviously not ideal. If .tabs has class .active, then I want its content displayed on the right. I have a counter running which changes class active every 5 seconds. I don't only want to show stuff on hover.
Having said the above, if I hover over another tabs div, I want the counter to stop - to prevent it from adding class active to another .tabs div (because the hovered on tabs is active.
Demo:
$(document).ready(function() {
// add class .active on li hover
$('.tabs').mouseenter(function() {
//$('.tabs').removeClass('active');
$(this).parents('.tabs').addClass('active');
});
// Change active tab every x seconds
$(function() {
var list = $(".tabs"),
currentActive = 0;
time = 5; // interval in seconds
setInterval(function() {
currentActive = (currentActive + 1) % list.length;
list.removeClass('active').eq(currentActive).addClass('active');
}, time * 1000);
});
})
var overview = $('.overview');
$('.tabs').each(function(i) {
var thisTab = $(this);
var thisContent = thisTab.find('.content').html();
// when class .active exists, change content in .overview
if ($('.tabs').hasClass('active')) {
overview.html(thisContent);
}
// on hover, change content in .overview
thisTab.on('mouseenter', function(e) {
thisTab.addClass('active');
overview.html(thisContent);
})
.on('mouseleave', function(e) {
thisTab.removeClass('active');
overview.html('');
});
});
.tabs.active {
background: none yellow;
}
.list {
flex-basis: 40%;
}
.list li {
list-style-type: none;
}
.overview {
flex-basis: 60%;
border: 1px solid blue;
}
.content {
display: none;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="d-flex flex-row">
<div class="list">
<li class="tabs active">
<div class="header"><span>Header</span></div>
<div class="content">
<p>Content 1</p>
</div>
</li>
<li class="tabs">
<div class="header"><span>Header 2</span></div>
<div class="content">
<p>Content 2</p>
</div>
</li>
<li class="tabs">
<div class="header"><span>Header 3</span></div>
<div class="content">
<p>Content 3</p>
</div>
</li>
</div>
<div class="overview"> </div>
</div>
Edit:
I've managed to make some movement on issue 1. I've added:
if ($('.tabs').hasClass('active')) {
overview.html(thisContent);
}
Which now, without hover, displays content in .overview, however, the content doesn't change when another tab is .active (i.e. in the demo, don't hover over anything, wait and it just shows content 3 for all headers.

I would do the following (I have commented what I have changed)
$(document).ready(function() {
var list = $(".tabs"),
overview = $('.overview'),
autoInterval, // interval var
currentActive = 0; // make this global to this closure
overview.html(list.eq(0).find('.content').html()); // set overview content
startInterval(); // start interval straight away
// add class .active on li hover
list.mouseenter(function() {
var thisTab = $(this);
currentActive = list.index(this); // set current active
list.removeClass('active'); // remove active class
thisTab.addClass('active'); // add active class
clearInterval(autoInterval); // clear the interval whilst hovering
var thisContent = thisTab.find('.content').html(); // get content
overview.html(thisContent); // set overview content
});
list.mouseleave(function() {
startInterval(); // restart the interval on mouseleave
});
function startInterval() {
// Change active tab every x seconds
time = 5; // interval in seconds
autoInterval = setInterval(function() {
currentActive = (currentActive + 1) % list.length;
list.removeClass('active');
var currentTab = list.eq(currentActive);
currentTab.addClass('active');
overview.html(currentTab.find('.content').html()); // set overview content
}, time * 1000);
}
});
.tabs.active {
background: none yellow;
}
.list {
flex-basis: 40%;
}
.list li {
list-style-type: none;
}
.overview {
flex-basis: 60%;
border: 1px solid blue;
}
.content {
display: none;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="d-flex flex-row">
<div class="list">
<li class="tabs active">
<div class="header"><span>Header</span></div>
<div class="content">
<p>Content 1</p>
</div>
</li>
<li class="tabs">
<div class="header"><span>Header 2</span></div>
<div class="content">
<p>Content 2</p>
</div>
</li>
<li class="tabs">
<div class="header"><span>Header 3</span></div>
<div class="content">
<p>Content 3</p>
</div>
</li>
</div>
<div class="overview"> </div>
</div>

As soon as you add the mouseenter event, you need to stop the interval, you have the method clearInterval to do so.

Select next div with jquery?

//$(document).ready(function(){
$('.next').click(function(){
$('.box').fadeOut();
$('.box').next().fadeIn();
});
//});
.box{
border:solid 1px #ccc;
padding: 20px;
width:10%;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="next" style="cursor:pointer;">next</a> <br><br>
<div class="box" style="display:block;">
1
</div>
<div class="box">
2
</div>
<div class="box">
3
</div>
<div class="box">
4
</div>
I have a div .box, and the next button. I need to select the next div if i click the next button but only the first div not all. For example if i click next button while it shown box 1 then the next box that should be appear is 2 and so on. But now it shown 2 3 4. How to do this ?

you can get the first visible div using $(.box:visible) and then fadeIn next div to it. you can also add a check for last element, in which case you can fadeIn the first element. something like this:
//$(document).ready(function(){
$('.next').click(function(){
var visibleBox = $('.box:visible');
$(visibleBox).fadeOut();
if(!$(visibleBox).next('div').length)
$('.box').first().fadeIn();
else
$(visibleBox).next().fadeIn();
});
//});
.box{
border:solid 1px #ccc;
padding: 20px;
width:10%;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="next" style="cursor:pointer;">next</a> <br><br>
<div class="box" style="display:block;">
1
</div>
<div class="box">
2
</div>
<div class="box">
3
</div>
<div class="box">
4
</div>

It's showing 2 3 4 because you ares selecting ALL .box elements, i.e. 1 2 3 4
.next() of 1 = 2
.next() of 2 = 3
.next() of 3 = 4
.next() of 4 = nothing
You should find the box that is currently being shown, and then find it's next sibling.
// Filter by CSS rule
var $showing = $('.box').filter(function() {
return $(this).css('display') === 'block';
}).fadeOut();
// or using :visible
$showing = $('.box:visible').fadeOut();
$showing.next().fadeIn();

you can use another class to labeled, which div is on the display. for example, you add a class display. then you put that class, on the first box. when you click next, you can remove the class display from the current one, and move it into the next one.
HTML
<a class="next" style="cursor:pointer;">next</a> <br><br>
<div class="box display">
1
</div>
<div class="box">
2
</div>
<div class="box">
3
</div>
<div class="box">
4
</div>
CSS
.box{
border:solid 1px #ccc;
padding: 20px;
width:10%;
display:none;
}
.display{
display:block
}
JQuery
$('.next').click(function(){
var current = $('.box.display');
current.fadeOut().removeClass('display').next().fadeIn().addClass('display');
});
Demo : https://jsfiddle.net/dfaLnsmo/

If I understand your requirement this will work
$(document).ready(function(){
var i = 1;
$('.next').click(function(){
$('.box').fadeOut();
$('.box:nth-child(i)').fadeIn();
if(i >= $('.box').length)
i++;
else
i=1;
});
});

Try the following Jquery
var curr = 1;
$('.next').click(function(){
if(curr < $( ".box" ).length) {
$('.box').hide();
$( ".box" )[curr].style.display= "block";
curr += 1;
}
});
Here is the working jsfiddel : https://jsfiddle.net/Lv7yr820/1/

accordion+tab = previous content does not disappear

When I click different links from different accordion elements content is displayed below previous one
$('.accordion').on('click', '.accordion-control', function(e){
e.preventDefault(); // Prevent default action of button
$(this) // Get the element the user clicked on
.next('.accordion-panel') // Select following panel
.not(':animated') // If it is not currently animating
.slideToggle(); // Use slide toggle to show or hide it
});
$('.tab-list').each(function(){ // Find lists of tabs
var $this = $(this); // Store this list
var $tab = $this.find('li.active'); // Get the active list item
var $link = $tab.find('a'); // Get link from active tab
var $panel = $($link.attr('href')); // Get active panel
$this.on('click', '.tab-control', function(e) { // When click on a tab
e.preventDefault(); // Prevent link behavior
var $link = $(this), // Store the current link
id = this.hash; // Get href of clicked tab
if (id && !$link.is('.active')) { // If not currently active
$panel.removeClass('active'); // Make panel inactive
$tab.removeClass('active'); // Make tab inactive
$panel = $(id).addClass('active'); // Make new panel active
$tab = $link.parent().addClass('active'); // Make new tab active
}
});
});
When I click different links from different accordion elements content is displayed below previous one
/********** ACCORDION **********/
.accordion, .menu {
background-color: #f2f2f2;
color: #666;
margin: 0;
padding: 0;
overflow: auto;}
.accordion li {
padding: 0;
list-style-type: none;}
.accordion-control {
background-color: rgba(0,0,0,0);
color: red;
display: block;
width: 100%;
padding: 0.5em 0.5em 0.5em 0.7em;
margin: 0;
}
.accordion-panel {
display: none;
}
.accordion-panel p {
margin: 20px;
}
.accordion-panel img {
display: block;
clear: left;
}
/*************** Panels ***************/
.tab-panel {
display: none;
}
.tab-panel.active {
display: block;
}
How do I make the previous content disappear?
<ul class="accordion">
<li class="active"><a class="tab-control" href="#tab-0">Misc Features</a></li>
<li>
<button class="accordion-control">Armory</button>
<div class="accordion-panel">
<ul class="tab-list">
<li><a class="tab-control" href="#tab-1">S grade</a></li>
<li><a class="tab-control" href="#tab-2">A grade</a></li>
<li><a class="tab-control" href="#tab-3">B grade</a></li>
<li><a class="tab-control" href="#tab-4">C grade</a></li>
</ul>
</div>
</li>
<li>
<button class="accordion-control">Weaponry</button>
<div class="accordion-panel">
<ul class="tab-list">
<li><a class="tab-control" href="#tab-5">Special Ability</a></li>
</ul>
</div>
</li>
<li>
<button class="accordion-control">Jewelry</button>
<div class="accordion-panel">
<ul class="tab-list">
<li><a class="tab-control" href="#tab-6">Raid Boss Jewelry</a></li>
</ul>
</div>
</li>
</ul>
<div class="content"> <!-- Content -->
<div class="tab-panel active" id="tab-0">misc features</div>
<div class="tab-panel" id="tab-1">armor S</div>
<div class="tab-panel" id="tab-2">armor A</div>
<div class="tab-panel" id="tab-3">armor B</div>
<div class="tab-panel" id="tab-4">armor C</div>
<div class="tab-panel" id="tab-5">weapon SA</div>
<div class="tab-panel" id="tab-6">RB jewelry</div>
</div>

Here is how you can do this:
$('.accordion .accordion-panel').not(this).slideUp();
$(this) // Get the element the user clicked on
.next('.accordion-panel') // Select following panel
.not(':animated') // If it is not currently animating
.slideToggle(); // Use slide toggle to show or hide it
Here is the demo.
Reference: jQuery: exclude $(this) from selector