good people of StackOverflow, I greet you all. I wrote this code and I think I really messed it up. The main focal point of this problem is the checkbox (which should control all switch buttons)
NOW THE PROBLEM...
You will notice that after you turn on one or two of the switch buttons, when you try checking the checkbox (which is the table head of that column) the switch buttons seem to jolt or jerk back and forth in opposite directions.
What I'm trying to achieve here is to make all switch buttons follow the same direction whenever the checkbox is checked on or off.
Please help me out guys, thank you :)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
body{
background-color: #e0e0e0;
}
.ads_banner_list .ads_banner_list_head{
background-color: #f0f0f0;
text-transform: capitalize;
padding: 10px 0 10px 20px;
}
.ads_banner_list .ads_banner_list_body{
width: 100%;
}
.ads_banner_list .ads_banner_list_body table{
border-collapse: collapse;
width: 100%;
}
table td:not(th){
font-size: 12px;
}
table th{
font-size: 12px;
}
table select{
font-size: 12px;
}
table button{
font-size: 12px;
padding: 5px;
text-transform: uppercase;
}
table .chk_line{
width: 50px;
height: 4px;
background-color: #807b10;
display: inline-block;
position: relative;
cursor: pointer;
}
table .chk_line .chk_btn{
position: absolute;
line-height: 25px;
width: 25px;
height: 25px;
background-color: #fff;
text-transform: uppercase;
font-size: 10px;
top: 50%;
transform: translateY(-50%);
}
.chk_btn.chk_off{
left: 0;
}
.chk_btn.chk_on{
right: 0;
}
thead tr{
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #000;
}
tbody tr:not(:last-child){
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #000;
}
th,td{
text-align: center;
padding: 10px 0px;
}
.td_img img{
width: 70px;
height: 40px;
}
.approved{
color: chartreuse;
}
.pending{
color: palevioletred;
}
.disapproved{
color: maroon;
}
</style>
<title>Document</title>
</head>
<body>
<div >
<div >banner list</div>
<div >
<table>
<thead>
<tr>
<th>I.D.</th>
<th>Type</th>
<th>Banner</th>
<th>Status</th>
<th>Validity</th>
<th>Expiration</th>
<th>Section</th>
<th>Clicks</th>
<th><input type="checkbox" /></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Static</td>
<td ><img src="./assets/media/images/ads/vita_malt.jpg" alt="" /></td>
<td>Showing</td>
<td>30 Days</td>
<td>15 Days</td>
<td>Home</td>
<td>100</td>
<td >
<div ><div >off</div></div>
</td>
</tr>
<tr>
<td>2</td>
<td>Animated</td>
<td ><img src="./assets/media/images/gif/heineken.gif" alt="" /></td>
<td>Queued</td>
<td>1 Day</td>
<td>5 Hours</td>
<td>General</td>
<td>0</td>
<td >
<div ><div >off</div></div>
</td>
</tr>
<tr>
<td>3</td>
<td>Static</td>
<td ><img src="./assets/media/images/ads/indomie.jpg" alt="" /></td>
<td>Showing</td>
<td>7 Days</td>
<td>3 Days</td>
<td>Politics</td>
<td>76</td>
<td >
<div ><div >off</div></div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
<script>
let checkbox = document.querySelector('input[type="checkbox"]')
let chk_btn = document.getElementsByClassName('chk_btn')
let chk_line1 = document.querySelector('.chk_line1')
let chk_line2 = document.querySelector('.chk_line2')
let chk_line3 = document.querySelector('.chk_line3')
let chk_btn1 = document.querySelector('.chk_btn1')
let chk_btn2 = document.querySelector('.chk_btn2')
let chk_btn3 = document.querySelector('.chk_btn3')
checkbox.onclick = () => {
for (let i = chk_btn.length - 1; i >= 0; i--) {
let checkedButton = chk_btn[i];
checkedButton.classList.toggle('chk_on')
if (checkedButton.classList.contains('chk_on')) {
checkedButton.textContent = 'on'
} else if (!checkedButton.classList.contains('chk_off')) {
checkedButton.textContent = 'off'
}
}
}
chk_line1.onclick = () => {
chk_btn1.classList.toggle('chk_on')
if (chk_btn1.classList.contains('chk_on')) {
chk_btn1.textContent = 'on'
} else if (!chk_btn1.classList.contains('chk_off')) {
chk_btn1.textContent = 'off'
}
}
chk_line2.onclick = () => {
chk_btn2.classList.toggle('chk_on')
if (chk_btn2.classList.contains('chk_on')) {
chk_btn2.textContent = 'on'
} else if (!chk_btn2.classList.contains('chk_off')) {
chk_btn2.textContent = 'off'
}
}
chk_line3.onclick = () => {
chk_btn3.classList.toggle('chk_on')
if (chk_btn3.classList.contains('chk_on')) {
chk_btn3.textContent = 'on'
} else if (!chk_btn3.classList.contains('chk_off')) {
chk_btn3.textContent = 'off'
}
}
</script>
CodePudding user response：
There should be a logical relation between buttons state and checkbox state, something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
body{
background-color: #e0e0e0;
}
.ads_banner_list .ads_banner_list_head{
background-color: #f0f0f0;
text-transform: capitalize;
padding: 10px 0 10px 20px;
}
.ads_banner_list .ads_banner_list_body{
width: 100%;
}
.ads_banner_list .ads_banner_list_body table{
border-collapse: collapse;
width: 100%;
}
table td:not(th){
font-size: 12px;
}
table th{
font-size: 12px;
}
table select{
font-size: 12px;
}
table button{
font-size: 12px;
padding: 5px;
text-transform: uppercase;
}
table .chk_line{
width: 50px;
height: 4px;
background-color: #807b10;
display: inline-block;
position: relative;
cursor: pointer;
}
table .chk_line .chk_btn{
position: absolute;
line-height: 25px;
width: 25px;
height: 25px;
background-color: #fff;
text-transform: uppercase;
font-size: 10px;
top: 50%;
transform: translateY(-50%);
}
.chk_btn.chk_off{
left: 0;
}
.chk_btn.chk_on{
right: 0;
}
thead tr{
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #000;
}
tbody tr:not(:last-child){
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #000;
}
th,td{
text-align: center;
padding: 10px 0px;
}
.td_img img{
width: 70px;
height: 40px;
}
.approved{
color: chartreuse;
}
.pending{
color: palevioletred;
}
.disapproved{
color: maroon;
}
</style>
<title>Document</title>
</head>
<body>
<div >
<div >banner list</div>
<div >
<table>
<thead>
<tr>
<th>I.D.</th>
<th>Type</th>
<th>Banner</th>
<th>Status</th>
<th>Validity</th>
<th>Expiration</th>
<th>Section</th>
<th>Clicks</th>
<th><input type="checkbox" /></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Static</td>
<td ><img src="./assets/media/images/ads/vita_malt.jpg" alt="" /></td>
<td>Showing</td>
<td>30 Days</td>
<td>15 Days</td>
<td>Home</td>
<td>100</td>
<td >
<div ><div >off</div></div>
</td>
</tr>
<tr>
<td>2</td>
<td>Animated</td>
<td ><img src="./assets/media/images/gif/heineken.gif" alt="" /></td>
<td>Queued</td>
<td>1 Day</td>
<td>5 Hours</td>
<td>General</td>
<td>0</td>
<td >
<div ><div >off</div></div>
</td>
</tr>
<tr>
<td>3</td>
<td>Static</td>
<td ><img src="./assets/media/images/ads/indomie.jpg" alt="" /></td>
<td>Showing</td>
<td>7 Days</td>
<td>3 Days</td>
<td>Politics</td>
<td>76</td>
<td >
<div ><div >off</div></div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
<script>
let checkbox = document.querySelector('input[type="checkbox"]')
let chk_btn = document.getElementsByClassName('chk_btn')
let chk_line1 = document.querySelector('.chk_line1')
let chk_line2 = document.querySelector('.chk_line2')
let chk_line3 = document.querySelector('.chk_line3')
let chk_btn1 = document.querySelector('.chk_btn1')
let chk_btn2 = document.querySelector('.chk_btn2')
let chk_btn3 = document.querySelector('.chk_btn3')
let checked = new Set;
checkbox.onclick = () => {
for (let i = chk_btn.length - 1; i >= 0; i--) {
let checkedButton = chk_btn[i];
if (checkbox.checked)
checkedButton.classList.add('chk_on');
else
checkedButton.classList.remove('chk_on');
if (checkedButton.classList.contains('chk_on')) {
checkedButton.textContent = 'on'
} else if (!checkedButton.classList.contains('chk_off')) {
checkedButton.textContent = 'off'
}
}
if (checkbox.checked)
checked.add(chk_btn1).add(chk_btn2).add(chk_btn3);
else
checked.clear();
}
chk_line1.onclick = () => {
chk_btn1.classList.toggle('chk_on')
if (chk_btn1.classList.contains('chk_on')) {
chk_btn1.textContent = 'on'
checked.add(chk_btn1);
} else if (!chk_btn1.classList.contains('chk_off')) {
chk_btn1.textContent = 'off'
checked.delete(chk_btn1);
}
checkbox.checked = checked.size === 3;
}
chk_line2.onclick = () => {
chk_btn2.classList.toggle('chk_on')
if (chk_btn2.classList.contains('chk_on')) {
chk_btn2.textContent = 'on'
checked.add(chk_btn2);
} else if (!chk_btn2.classList.contains('chk_off')) {
chk_btn2.textContent = 'off'
checked.delete(chk_btn2);
}
checkbox.checked = checked.size === 3;
}
chk_line3.onclick = () => {
chk_btn3.classList.toggle('chk_on')
if (chk_btn3.classList.contains('chk_on')) {
chk_btn3.textContent = 'on'
checked.add(chk_btn3);
} else if (!chk_btn3.classList.contains('chk_off')) {
chk_btn3.textContent = 'off'
checked.delete(chk_btn3);
}
checkbox.checked = checked.size === 3;
}
</script>