Develop Reference

How to get more toggle hide/show div with different class

I have a toggle that show or hide a div class. The status toggle is saved in local storage, so after page refresh the desired setting is maintained.
Now I'm trying to get another toggle that performs the same functions on a different class. I tried with a simple copy / paste changing the names of the classes and functions, but it doesn't work.
Can anyone give me a suggestion?
Fiddle: https://jsfiddle.net/snake93/s0rx4ube/9/
function save() {
var checkbox = document.getElementById("ck1");
localStorage.setItem("ck1", JSON.stringify(checkbox.checked));
}
function isChecked(isOn) {
if (isOn === true) {
$(".hideme").show();
} else {
$(".hideme").hide();
}
}
//for loading
var checked = JSON.parse(localStorage.getItem("ck1"));
document.getElementById("ck1").checked = checked;
console.log(checked);
$(document).ready(function(){
isChecked(checked)
$(".switch input").on("change", function(e) {
const isOn = e.currentTarget.checked;
console.log(isOn)
isChecked(isOn);
});
});
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
/*END OF TOGGLE SWITCH*/
.hideme {
padding:20px;
background: blue;
color: white;
font-weight: 800;
text-align: center;
}
<!-- jQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<label class="switch">
<input type="checkbox" id="ck1" onchange="save()">
<span class="slider round hide-off"></span>
</label>
<br><br>
<div class="hideme">Please hide me, but bring me back later ;-)</div>

I believe you can have more dynamism by making better use of css selectors and adding an attribute with the same input id to the divs you intend to show/hide.
HTML:
<label class="switch">
<input type="checkbox" id="ck1">
<span class="slider round hide-off"></span>
</label>
<br><br>
<label class="switch">
<input type="checkbox" id="ck2">
<span class="slider round hide-off"></span>
</label>
<br><br>
<div class="hideme" id="label-ck1">Please hide me...</div>
<div class="hideme" id="label-ck2">Please hide me...</div>
JAVASCRIPT
$(document).ready(function(){
getLocalStatus()
$(".switch input").on("change", function(e) {
const element = e.currentTarget;
saveStatus(element)
setLabelVisibility(element.getAttribute('id'),element.checked);
})
})
function getLocalStatus() {
const checkboxes = $('input[type=checkbox]');
checkboxes.each(function(index,checkbox){
const checkboxId = checkbox.getAttribute('id')
var currentStatus= localStorage.getItem(checkboxId)
if (currentStatus == "true") {
currentStatus = true;
} else {
currentStatus = false;
}
checkbox.checked = currentStatus;
setLabelVisibility(checkboxId, currentStatus)
})
}
function setLabelVisibility(id,status){
const label = $("#label-" + id + "");
if(status == false){
label.hide();
return;
}
label.show();
}
function saveStatus(e) {
localStorage.setItem(e.getAttribute('id'), e.checked)
}

You need to give your show/hide DIVs different IDs and pass those into the function. (this is just one of several ways)
The element you want to show/hide needs a unique ID so we can differentiate it from the others, so forget about using a class as a selector here. The toggle function takes two parameters, the element that called it and the element ID that gets toggled. In the HTML below, 'this' will refer to that specific checkbox when its clicked. '#div1' and '#div2' are the IDs of the elements to toggle.
I've added in your local storage bit.
function toggle(p, c){
if ($(p).prop("checked")){
$(c).show();
}else{
$(c).hide();
}
localStorage.setItem($(p).attr("id"), JSON.stringify($(p).prop("checked")));
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
/*END OF TOGGLE SWITCH*/
.hideme{
padding:20px;
background: blue;
color: white;
font-weight: 800;
text-align: center;
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="switch">
<input type="checkbox" id="ck1" onchange="toggle(this, '#div1')">
<span class="slider round hide-off"></span>
</label>
<label class="switch">
<input type="checkbox" id="ck2" onchange="toggle(this, '#div2')">
<span class="slider round hide-off"></span>
</label>
<br><br>
<div id="div1" class="hideme">Please hide me, but bring me back later ;-)</div>
<div id="div2" class="hideme">Please hide me, but bring me back later ;-)</div>

This is another possible solution and one that I would prefer:
Change the input as so:
<input type="checkbox" id="ck1" class="btn" data-toggle-id="#div1">
Then the javascript (with jquery) would look like this instead:
$('.btn').on('change', function(){
var $d = $($(this).attr('data-toggle-id'));
if ($(this).prop("checked")){
$d.show();
}else{
$d.hide();
}
});

How to revert toggle button using javascript

I am trying to create a toggle button. Here is the code: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_switch
In my javascript code - I read the 'checkbox' value. If the value is true then I add another div and this another div also has a close button. When the close button is hit, I remove this newly added div from the dom.
So far this all works fine.
I also want to toggle back the button. I am setting up the value to false with the following line:
document.getElementsByName("addUserConfirmation").checked = false;
It does set the value to false, but the toggle button still remain blue. How do I set it back to off?
Here is the code snippet:
function removeCardRevertToggleButton(button, container) {
var parentContainer = document.getElementById(container);
jQuery(parentContainer).children().remove();
document.getElementsByName("addConfirmation").checked = false;
}
<div class="boxStyle">
<span class="closeButton" requestid="" onclick="removeCardRevertToggleButton(this, "inviteContainerContext")">×</span>
</div>
Here is the jsfiddle:
https://jsfiddle.net/u9y2w8ev/15/
When close ('x') button is clicked, I want to switch the toggle button to off.

document.getElementsByName("addConfirmation") returns an array (Elements). You have to access an array element like this
document.getElementsByName("addUserConfirmation")[0].checked
function removeCardRevertToggleButton(button) {
document.getElementsByName("addUserConfirmation")[0].checked = false;
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.slider {
background-color: #2196F3;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<body>
<label class="switch">
<input type="checkbox" name="addUserConfirmation" checked>
<span class="slider round"></span>
</label>
<div class="boxStyle">
<span class="closeButton" onclick='removeCardRevertToggleButton(this)'>×
</span>
</div>
</body>

I have updated fiddle as https://jsfiddle.net/k086xnpd/
HTML Code:
<body>
<label class="switch">
<input type="checkbox" id="test" name="addUserConfirmation" checked>
<span class="slider round"></span>
</label>
<div class="boxStyle">
<span class="closeButton" onclick='removeCardRevertToggleButton(this)'>×
</span>
</div>
</body>
JS Code:
function removeCardRevertToggleButton(button) {
alert("Clicked, new value = " + button.checked);
//var parentContainer = document.getElementById(container);
//jQuery(parentContainer).children().remove();
document.getElementById("test").checked = false;
document.getElementById("test").addClass('slider:before');
}
Hoping that is what you were looking for :)

How to show CSS animation in form with javascript validation only when input is valid

I made a form with js validation that sets an error function (setErrorFor) if the input is not valid.
The form has a submit button that shows an animated checkmark if the input is valid (function showSucces). When the input is not valid it needs to not show that checkmark.
So I created a function (stopSendingData) to prevent the succes function from executing. But now the checkmark is not showing at all, even if the input is valid.
So I tried to change the if statement in the stopSendingData function and I tried it by changing the way to stop it but non of the attempts made the checkmark only showing when the input is valid.
I really look forward to hear from what I am doing wrong and how to solve this.
// Listen for a submit
document.querySelector(".contactForm").addEventListener("submit", submitForm);
function submitForm(e) {
e.preventDefault();
checkInputs(); //val
showSucces();
}
function showSucces() {
document.getElementById("submitButton").classList.add("clicked");
setTimeout(() => {
document.getElementById("submitButton").classList.remove("clicked");
}, 4000);
}
//form validaton
const namecontact = document.getElementById('namecontact'); //Val
const email = document.getElementById('email'); //Val
const message = document.getElementById('message'); //Val
function checkInputs() {
//Get the values from the inputs
const nameValue = namecontact.value.trim();
const emailValue = email.value.trim();
const messageValue = message.value.trim();
const numbers = /^[0-9]+$/;
if (nameValue === '') {
setErrorFor(namecontact, "Name cannot be blank.");
}
if (nameValue.match(numbers)) {
setErrorFor(namecontact, "Name can not contain number(s).");
}
if (emailValue === '') {
setErrorFor(email, "Email cannot be blank.");
}
else if (!isEmail(emailValue)) {
setErrorFor(email, 'Email is not valid.');
}
if (messageValue === '') {
setErrorFor(message, "Message cannot be blank.");
}
stopSendingData();
}
function setErrorFor(input, errorMessage) {
const formControl = input.parentElement; //.form-control
const small = formControl.querySelector('small');
//add error message inside small
small.innerText = errorMessage;
// add error class
formControl.className = 'form-control error';
}
function isEmail(email) {
return /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email);
}
function stopSendingData() {
// const small = document.querySelector('small');
const small = getElementsByTagName('small');
const formControl = small.parentElement; //.form-control
if (formControl.className = 'form-control error') {
return false;
}
}
.contactForm {
flex: 0%;
margin: 0px 0px;
width: 21%;
position: absolute;
margin: 90px 0px 0px 10.5px;
left: 0px;
/* max-width : 100%; */
/* opacity : 0.39; */
}
.name,
.email,
.subject {
position: relative;
width: 279px;
height: 39px;
padding: 9px 15px 15px 15px;
margin-left: 39.9px;
font-size: 13.2px;
}
.message {
position: relative;
width: 279px;
height: 60px;
padding: 9px 15px 15px 15px;
margin-left: 39.9px;
font-size: 13.2px;
}
::placeholder {
margin-top: 0px;
font-size: 12px;
}
.fas.fa-exclamation-circle {
color: red;
width: 15px;
height: 15px;
position: absolute;
/* visibility : visible; */
top: 15px;
right: 60px;
}
/*
.form-control input {
border : 1px solid transparent;
} */
.form-control {
position: relative;
}
.form-control i.fas.fas.fa-exclamation-circle {
visibility: hidden;
}
small {
position: absolute;
left: 75px;
visibility: hidden;
top: 24.9px;
font-size: 13.5px;
font-weight: bolder;
z-index: 9;
width: 300px;
}
.form-control.error input {
border-color: red;
}
.form-control.error textarea {
border-color: red;
}
.form-control.error i.fas.fas.fa-exclamation-circle {
visibility: visible;
color: red;
}
.form-control.error small {
color: red;
visibility: visible;
}
#submitButton {
margin: 9px 0px 0px 42px;
width: 277.2px;
height: 27px;
}
#submitButton {
position: relative;
cursor: pointer;
height: 30px;
width: 90px;
transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
}
#submitButton.clicked {
background-color: rgb(4, 221, 250);
color: rgb(21, 21, 24);
font-weight: bold;
font-size: 16.2px;
opacity: 0.6;
padding-top: 1.7px;
}
#submitButton.clicked span {
animation: spanShrink 1.8s ease-in-out forwards;
}
#keyframes spanShrink {
15% {
opacity: 0;
}
85% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#submitButton .checkmark {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
stroke-width: 3;
stroke: rgb(18, 19, 19);
stroke-miterlimit: 10;
width: 51px;
height: 51px;
transform-origin: 50% 50%;
stroke-dasharray: 48;
stroke-dashoffset: 48;
}
#submitButton.clicked .checkmark {
animation: stroke 1.5s ease-in-out 0.6s forwards;
}
#keyframes stroke {
20% {
stroke-dashoffset: 0;
}
50% {
stroke-dashoffset: 0;
}
70% {
stroke-dashoffset: 48;
}
}
<form method="POST" class="contactForm" id="form">
<div class="form-control">
<input class="name" id="namecontact" type="text" placeholder="Name" /><br>
<i class="fas fa-exclamation-circle" id="exclamation1"></i>
<small></small>
</div>
<div class="form-control">
<input class="email" id="email" placeholder="E-mail" /><br>
<i class="fas fa-exclamation-circle" id="exclamation2"></i>
<small></small>
</div>
<div class="form-control">
<input class="subject" type="text" placeholder="Subject" /><br>
</div>
<div class="form-control">
<textarea class="message" id="message" cols="30" rows="10" placeholder="Message"></textarea><br>
<i class="fas fa-exclamation-circle" id="exclamation4"></i>
<small></small>
</div>
<button id="submitButton" type="submit">
<span>Launch</span>
<svg class="checkmark" viewBox="0 0 52 52">
<path fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
</svg>
</button>
</div>
</form>

To solve your problem you simply have to move the call of showSucces() to the end of stopSendingData(). Otherwise you call it everytime when the form is submitted, even if the check failes.
By the way: There are some issues in your code:
you have to call getElementsByTagName() with document. before it:
const small = document.getElementsByTagName('small');
getElementsByTagName() produces a collection of elements, not a single one, so that you can't get a parent element this way. Therefor you have to loop over the collection:
for (i = 0; i < small.length; i++) {
if (small[i].parentElement.classList.contains('error')) {
return false;
}
}
you have a closing div to much (at the end of the form)
Working example:
// Listen for a submit
document.querySelector(".contactForm").addEventListener("submit", submitForm);
function submitForm(e) {
e.preventDefault();
checkInputs(); //val
}
function showSucces() {
document.getElementById("submitButton").classList.add("clicked");
setTimeout(() => {
document.getElementById("submitButton").classList.remove("clicked");
}, 4000);
}
//form validaton
const namecontact = document.getElementById('namecontact'); //Val
const email = document.getElementById('email'); //Val
const message = document.getElementById('message'); //Val
function checkInputs() {
//Get the values from the inputs
const nameValue = namecontact.value.trim();
const emailValue = email.value.trim();
const messageValue = message.value.trim();
const numbers = /^[0-9]+$/;
if (nameValue === '') {
setErrorFor(namecontact, "Name cannot be blank.");
}
if (nameValue.match(numbers)) {
setErrorFor(namecontact, "Name can not contain number(s).");
}
if (emailValue === '') {
setErrorFor(email, "Email cannot be blank.");
} else if (!isEmail(emailValue)) {
setErrorFor(email, 'Email is not valid.');
}
if (messageValue === '') {
setErrorFor(message, "Message cannot be blank.");
}
stopSendingData();
}
function setErrorFor(input, errorMessage) {
const formControl = input.parentElement; //.form-control
const small = formControl.querySelector('small');
//add error message inside small
small.innerText = errorMessage;
// add error class
formControl.className = 'form-control error';
}
function isEmail(email) {
return /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email);
}
function stopSendingData() {
const small = document.getElementsByTagName('small');
for (i = 0; i < small.length; i++) {
if (small[i].parentElement.classList.contains('error')) {
return false;
}
}
showSucces();
}
.contactForm {
flex: 0%;
margin: 0px 0px;
width: 21%;
position: absolute;
margin: 90px 0px 0px 10.5px;
left: 0px;
}
.name,
.email,
.subject {
position: relative;
width: 279px;
height: 39px;
padding: 9px 15px 15px 15px;
margin-left: 39.9px;
font-size: 13.2px;
}
.message {
position: relative;
width: 279px;
height: 60px;
padding: 9px 15px 15px 15px;
margin-left: 39.9px;
font-size: 13.2px;
}
::placeholder {
margin-top: 0px;
font-size: 12px;
}
.fas.fa-exclamation-circle {
color: red;
width: 15px;
height: 15px;
position: absolute;
top: 15px;
right: 60px;
}
.form-control {
position: relative;
}
.form-control i.fas.fas.fa-exclamation-circle {
visibility: hidden;
}
small {
position: absolute;
left: 75px;
visibility: hidden;
top: 24.9px;
font-size: 13.5px;
font-weight: bolder;
z-index: 9;
width: 300px;
}
.form-control.error input {
border-color: red;
}
.form-control.error textarea {
border-color: red;
}
.form-control.error i.fas.fas.fa-exclamation-circle {
visibility: visible;
color: red;
}
.form-control.error small {
color: red;
visibility: visible;
}
#submitButton {
margin: 9px 0px 0px 42px;
width: 277.2px;
height: 27px;
}
#submitButton {
position: relative;
cursor: pointer;
height: 30px;
width: 90px;
transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
}
#submitButton.clicked {
background-color: rgb(4, 221, 250);
color: rgb(21, 21, 24);
font-weight: bold;
font-size: 16.2px;
opacity: 0.6;
padding-top: 1.7px;
}
#submitButton.clicked span {
animation: spanShrink 1.8s ease-in-out forwards;
}
#keyframes spanShrink {
15% {
opacity: 0;
}
85% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#submitButton .checkmark {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
stroke-width: 3;
stroke: rgb(18, 19, 19);
stroke-miterlimit: 10;
width: 51px;
height: 51px;
transform-origin: 50% 50%;
stroke-dasharray: 48;
stroke-dashoffset: 48;
}
#submitButton.clicked .checkmark {
animation: stroke 1.5s ease-in-out 0.6s forwards;
}
#keyframes stroke {
20% {
stroke-dashoffset: 0;
}
50% {
stroke-dashoffset: 0;
}
70% {
stroke-dashoffset: 48;
}
}
<form method="POST" class="contactForm" id="form">
<div class="form-control">
<input class="name" id="namecontact" type="text" placeholder="Name" /><br>
<i class="fas fa-exclamation-circle" id="exclamation1"></i>
<small></small>
</div>
<div class="form-control">
<input class="email" id="email" placeholder="E-mail" /><br>
<i class="fas fa-exclamation-circle" id="exclamation2"></i>
<small></small>
</div>
<div class="form-control">
<input class="subject" type="text" placeholder="Subject" /><br>
</div>
<div class="form-control">
<textarea class="message" id="message" cols="30" rows="10" placeholder="Message"></textarea><br>
<i class="fas fa-exclamation-circle" id="exclamation4"></i>
<small></small>
</div>
<button id="submitButton" type="submit">
<span>Launch</span>
<svg class="checkmark" viewBox="0 0 52 52">
<path fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
</svg>
</button>
</form>

The answer to you question is pretty easy,
just create a class say animating and write the code:
.animating{
animation: animation-name 1s 1;
}
and then go to javascript file and add the lines as required with some changes:
//let the element to be animated have id = 'input1'
document.getElementById('input1').classList.add('animating');//to add animation
//or
document.getElementById('input1').classList.remove('animating');//to remove animation

well, apart from the fact that you are visibly annoyed with the indentation and that it makes reading your code painful, the first problem with your code is that you do not use any name attributes in your form, whereas those- these are essential because they are the reference used on the data sent to the server
They are also very useful in JS, because they also serve as a direct reference in forms
<form name="my-form-name" id="my-form-id" ....
<input name="namecontact" type="text" placeholder="Name" />
javascript use:
const myForm = document.forms['my-form-name']
// or myForm = document.querySelector("#my-form-id")
// usage
function checkInputs()
{
const nameValue = myForm.namecontact.value.trim()
// | |
// | name attribute
// |
// form element
// ...
myForm.onsubmit = e =>
{
e.preventDefault()
checkInputs()
showSucces()
}

why my code doesnt run right? whats the promble of this if statment?

iam desiging a web site that can change the prices
when for first time i click on slider the price become 19.99 and for the next time my price become 199.99.
my project is this https://www.frontendmentor.io/challenges/pricing-component-with-toggle-8vPwRMIC
im using a variable if the variable ==1 then change the price to 199.99 and when the variable ==2 then change price to 19.99 ; but every time i click the price stays on 19.99:/
$(function(){
var m = 1;
$(".switch").click(function(){
if(m == 1){
alert("hi");
$("#h1").html("$199.99");
$("#h2").html("$249.99");
$("#h3").html("$399.99");
m = 0;
} else{
alert("bye");
$("#h1").html("$19.99");
$("#h2").html("$24.99");
$("#h3").html("$39.99");
m = 0;
}
});
});
when i click both hi and bye alerts ,alerted and i dont know why ???:///
the return statment in if block also doesn't the solution, i tried.

As far as I think price ain't defined.

$(".switch").click(function(){
if(document.getElementById('isAgeSelected').checked) {
$("#h1").html("$199.99");
$("#h2").html("$249.99");
$("#h3").html("$399.99");
} else {
$("#h1").html("$19.99");
$("#h2").html("$24.99");
$("#h3").html("$39.99");
}
});
$(document).ready(function(){
if(document.getElementById('isAgeSelected').checked) {
$("#h1").html("$199.99");
$("#h2").html("$249.99");
$("#h3").html("$399.99");
} else {
$("#h1").html("$19.99");
$("#h2").html("$24.99");
$("#h3").html("$39.99");
}
});
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="switch">
<input type="checkbox" id="isAgeSelected" value="Yes">
<span class="slider"></span>
</label>
<div id="h1"></div>
<div id="h2"></div>
<div id="h3"></div>
I HOPE THIS MIGHT SOLVE YOUR PROBLEM IN A EASY WAY

Considering your limited code, I tried recreating it:
Looks like you're not passing prices values correctly, the if and else conditions are correct, you can change the values in the first line and try checking it, I was able to run both the conditions. The issues seems you're not sending the correct values to prices.
var prices = 0; /* change to you values here from 0 to 1 */
$(document).ready(function() {
var m = 1;
$(".divSwitch").click(function() {
if (prices == 1) {
alert("hi");
$("#h1").html("$199.99");
$("#h2").html("$249.99");
$("#h3").html("$399.99");
m = 0;
} else {
alert("bye");
$("#h1").html("$19.99");
$("#h2").html("$24.99");
$("#h3").html("$39.99");
m = 0;
}
});
});
.divSwitch {
background-color: red;
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="divSwitch" sytle="height:50px;width:50px;background-color:red;">Click here.
<div id="h1"></div>
<div id="h2"></div>
<div id="h3"></div>
</div>

Highlight a checkbox when an other check box is clicked

I have multiple checkboxes that have the same ID for different screen resolutions. When I click on the Check 1 label the checkmark gets highlighted. In the example provided both check 1 and check2 have the same IDs, when I click on check 1 I want the check mark of check 2 too also be highlighted and vice versa.
.checkmark {
display: inline-block;
width: 22px;
/*height: 22px;*/
height: 17px;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
margin-left: 50%;
margin-bottom: 1px;
}
.checkmark::before {
content: '';
position: absolute;
width: 3px;
height: 9px;
background-color: #ccc;
left: 11px;
top: 6px;
}
.checkmark {
cursor: pointer;
}
.checkmark::after {
content: '';
position: absolute;
width: 3px;
height: 3px;
background-color: #ccc;
left: 8px;
top: 12px;
}
input[type="checkbox"]:checked+.checkmark:before,
input[type="checkbox"]:checked+.checkmark:after {
background: linear-gradient(rgb(42, 104, 149) 0px, rgb(44, 109, 157) 100%);
}
<div class="menu-lg">
<label style="display: inline;color: #545454;font-weight:100;" dataid="' +this.ID +'">
<input type= "checkbox" style= "display:none;" id="10A">Check1
<span for="10A" class="checkmark"></span >
</label >
</div>
<div class="menu-sm">
<label style="display: inline;color: #545454;font-weight:100;" dataid="' +this.ID +'" >
<input type= "checkbox" style= "display:none;" id="10A">Check2
<span for="10A" class="checkmark"></span >
</label >
</div>
How do I highlight all the checkmarks of the same IDS?

Highlighting is in your case based on the :checked selector -> if the checkbox is checked, the span behind it is highlighted.
In your case you will need javascript to react on the onchange / click event on the checkbox and trigger the other checkbox aswell.
A basic setup how to use it, you will need to alter that to your needs:
// use click or onchange
document.getElementById('checkbox1').addEventListener('click', function () {
document.getElementById('checkbox2').click();
});

You can do it with this javascript code.
This code does the following:
Add an event listener to the change event of both check boxes.
Set the checked property of the other checkbox to the same value as the checked property of the checkbox where the change event triggered on.
Note: I changed the id's of the check boxes to make them unique.
document.getElementById('10A-1').addEventListener('change', function () {
document.getElementById('10A-2').checked = this.checked;
});
document.getElementById('10A-2').addEventListener('change', function () {
document.getElementById('10A-1').checked = this.checked;
});
.checkmark {
display: inline-block;
width: 22px;
/*height: 22px;*/
height: 17px;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
margin-left: 50%;
margin-bottom: 1px;
}
.checkmark::before {
content: '';
position: absolute;
width: 3px;
height: 9px;
background-color: #ccc;
left: 11px;
top: 6px;
}
.checkmark {
cursor: pointer;
}
.checkmark::after {
content: '';
position: absolute;
width: 3px;
height: 3px;
background-color: #ccc;
left: 8px;
top: 12px;
}
input[type="checkbox"]:checked+.checkmark:before,
input[type="checkbox"]:checked+.checkmark:after {
background: linear-gradient(rgb(42, 104, 149) 0px, rgb(44, 109, 157) 100%);
}
<div class="menu-lg">
<label style="display: inline;color: #545454;font-weight:100;" dataid="' +this.ID +'">
<input type= "checkbox" style= "display:none;" id="10A-1">Check1
<span for="10A-1" class="checkmark"></span >
</label >
</div>
<div class="menu-sm">
<label style="display: inline;color: #545454;font-weight:100;" dataid="' +this.ID +'" >
<input type= "checkbox" style= "display:none;" id="10A-2">Check2
<span for="10A-2" class="checkmark"></span >
</label >
</div>

//Run it after document ready
var checkbox = $('input[type="checkbox"]');
$(checkbox).on('click', function(){
if($(this).is(':checked')){
$(checkbox).prop('checked', true);
}
else{
$(checkbox).prop('checked', false);
}
});