I trying to create a function which reverts toggle switches back to off.
I'm turning a light on or off with my switch but there is a button and if i press that I want all the lights to turn off and the switches to turn to 'off'
As you can see there are 4 switches and a button to shut everything down. And I'm wondering how I can communicate between HTML, CSS and JS
<label class="switch">
<input type="checkbox" name="one" id="one">
<span class="slider round">
</span> </label>
<label class="switch">
<input type="checkbox" name="two" id="two">
<span class="slider round">
</span> </label>
<label class="switch">
<input type="checkbox" name="three" id="three">
<span class="slider round">
</span> </label>
<label class="switch">
<input type="checkbox" name="four" id="four">
<span class="slider round">
</span> </label>
<br>
<input type="button" id="stop" value="Stop All" onclick="shutdown()"><br>
I have created an example app for you here. https://codesandbox.io/embed/lucid-brook-q6qsq
The idea is to use document.querySelectorAll and iterate over all the checkboxes and uncheck them. Here is the relevant code:
document.querySelector("#stop").addEventListener("click", () => {
const switches = document.querySelectorAll(".switch input");
for (let s of switches) {
s.checked = false;
}
});
I recommend you look up querySelectorAll
window.addEventListener("load", function() {
document.getElementById("stop").addEventListener("click", function() {
[...document.querySelectorAll(".switch input[type=checkbox]")].forEach(function(chk) {
chk.checked = false; // and perhaps add chk.onchange() if needed
});
});
});
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.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%;
}
<label class="switch">
<input type="checkbox" name="one" id="one">
<span class="slider round">
</span> </label>
<label class="switch">
<input type="checkbox" name="two" id="two">
<span class="slider round">
</span> </label>
<label class="switch">
<input type="checkbox" name="three" id="three">
<span class="slider round">
</span> </label>
<label class="switch">
<input type="checkbox" name="four" id="four">
<span class="slider round">
</span> </label>
<br>
<input type="button" id="stop" value="Stop All" /><br>
Alternative code for ancient browsers
var chks = document.querySelectorAll(".switch input[type=checkbox]");
for (var i=0;i<chks.length;i++) chks[i].checked = false;
in JavaScript you'll use the getElementsByClassName() method. You'll have to add a class to all of your checkboxes, alternatively you can use getElementsByTagName() to target the checkbox tags.
let switches = document.getElementsByClassName("checkboxClass");
then iterate thru the class with JavaScript
for (let i = 0; i < switches.length; i++) {
switches[i].checked = false;
}
this will turn them all off. you can put this in a function and call it whenever (onclick/onchange, etc.)
Hope this helps, good luck!
Related
I want to display the tooltip only when I hover over a checked radio button.
When hovered on the radio button I'm trying to check
$(this).is(':checked') == true
But the tooltip is displayed only when hovered on "Yes". What am I doing wrong here?.
Any suggestions are highly appreciated. Thanks in advance. :)
$("input[name^='radioBtn']").hover(function () {
if(($(this).is(':checked')) == true){
var text= "Hello";
$(".displayContents").append(text);
}
});
.radioHover:hover ~ .displayContents{
visibility: visible;
}
.displayContents{
visibility: hidden;
background-color: white;
border: 2px solid black;
position: absolute;
z-index: 1;
border-radius: 6px;
padding: 5px 0;
width: 350px;
/* border-spacing: 35px; */
text-align: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div>
<div>
<input type="radio" name="radioBtn radioHover" value="true" id="radioYes" class="radioBtn radioHover"/><br />
<div class="displayContents"></div>
<span>Yes</span>
</div>
<div>
<input type="radio" name="radioBtn radioHover" value="true" id="radioNo" class="radioBtn"/><br />
<div class="displayContents"></div>
<span>No</span>
</div>
</div>
It is not necessary to use jQuery to achieve your desired goal. It is enough to aim the :hover pseudo-class at the :checked pseudo-class, in the css. Like this:
.radioHover:checked:hover ~ .displayContents {
visibility: visible;
}
For unique content of each radio button, use id #radioYes and #radioNo with operator ~.
$("#radioYes ~ .displayContents").text("Hello Yes");
$("#radioNo ~ .displayContents").text("Hello No");
.radioHover:checked:hover ~ .displayContents {
visibility: visible;
}
.displayContents {
visibility: hidden;
background-color: white;
border: 2px solid black;
position: absolute;
z-index: 1;
border-radius: 6px;
padding: 5px 0;
width: 350px;
/* border-spacing: 35px; */
text-align: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div>
<div>
<input type="radio" name="radioBtn" value="true" id="radioYes" class="radioBtn radioHover" /><br />
<div class="displayContents"></div>
<span>Yes</span>
</div>
<div>
<input type="radio" name="radioBtn" value="true" id="radioNo" class="radioBtn radioHover" /><br />
<div class="displayContents"></div>
<span>No</span>
</div>
</div>
First of all, you put radioHover into name attribute.
Anyway, you should set radioHover class on the checked button only, like so:
$("input[name='radioBtn']").hover(function () {
this.classList.toggle("radioHover", this.checked);
if($(this).is(':checked') == true){
var text= "Hello";
$(".displayContents").append(text);
}
});
.radioHover:hover ~ .displayContents{
visibility: visible;
}
.displayContents{
visibility: hidden;
background-color: white;
border: 2px solid black;
position: absolute;
z-index: 1;
border-radius: 6px;
padding: 5px 0;
width: 350px;
/* border-spacing: 35px; */
text-align: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div>
<div>
<input type="radio" name="radioBtn" value="true" id="radioYes" class="radioBtn"/><br />
<div class="displayContents"></div>
<span>Yes</span>
</div>
<div>
<input type="radio" name="radioBtn" value="false" id="radioNo" class="radioBtn"/><br />
<div class="displayContents"></div>
<span>No</span>
</div>
</div>
You had some typos and some misunderstandings. The radioHover class was in the name field, was missing in the class for the 'no' radio. Additionally, you have 2 different . displayContents elements. The way to target the one associated with the radio is via the .closest(selector).find(selector) combo. I didn't think you wanted to actually append the same HTML continuously, so I changed that to .html().
Finally, I added the 'change' event in the mix - that way you'll get your value on hover and on click (if checked). Reason being, you are hovering over the element when you click it. Yet the hover didn't update when the state went from not-checked to checked. Now it does
$("input[name='radioBtn']").on('hover, change', function() {
if ($(this).is(':checked')) {
$(this).closest('div').find(".displayContents").html('Hello from ' + $(this).val());
}
});
.radioHover:checked:hover~.displayContents {
visibility: visible;
}
.displayContents {
visibility: hidden;
background-color: white;
border: 2px solid black;
position: absolute;
z-index: 1;
border-radius: 6px;
padding: 5px 0;
width: 350px;
/* border-spacing: 35px; */
text-align: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div>
<div>
<input type="radio" name="radioBtn" value="yes" id="radioYes" class="radioBtn radioHover" /><br />
<div class="displayContents"></div>
<span>Yes</span>
</div>
<div>
<input type="radio" name="radioBtn" value="no" id="radioNo" class="radioBtn radioHover" /><br />
<div class="displayContents"></div>
<span>No</span>
</div>
</div>
Not sure a similar question has been asked before. If so please point it out.
Of course I am new to this field. So please bear with me.
I have a html webpage which contains 6 switches.
I need to save on and off conditions of those switches into different variables.
on = 1
off = 0
As an instance, switch 1 on/off conditions represents x variable.
when on x=1 off x=0
switch 2 on/off conditions represents y variable.
when on y=1 off y=0
my page views as follows.
My code:
.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%;
}
*/
<h2>Toggle Switch</h2>
<label name="s" class="switch">
<input type="checkbox" checked>
<span class="slider"></span>
</label><br><br>
<label class="switch">
<input type="checkbox" checked>
<span class="slider"></span>
</label><br><br>
<label class="switch">
<input type="checkbox" checked>
<span class="slider"></span>
</label><br><br>
<label class="switch">
<input type="checkbox" checked>
<span class="slider"></span>
</label><br><br>
<label class="switch">
<input type="checkbox" checked>
<span class="slider"></span>
</label><br><br>
<label class="switch">
<input type="checkbox" checked>
<span class="slider"></span>
</label><br><br>
<label class="switch">
<input type="checkbox">
</label>
<label class="switch">
<input type="checkbox" checked>
</label>
Can someone help me to save these switch conditions into different variables? I would really appreciate it.
Thanks heaps!
Create a JavaScript function to handle the switch change:
<script type="text/JavaScript">
var switchValues = { };
function switched (switchElement) {
switchValues[switchElement.id] = switchElement.checked;
}
</script>
Then make sure each of your checkbox switches has a unique id attribute and onclick handler assigned to your new function:
<label name="s" class="switch">
<input type="checkbox" id="switch1" onclick="switched(this)" checked>
<span class="slider"></span>
</label><br><br>
<label class="switch">
<input type="checkbox" id="switch2" onclick="switched(this)" checked>
<span class="slider"></span>
</label><br><br>
<label class="switch">
<input type="checkbox" id="switch3" onclick="switched(this)" checked>
<span class="slider"></span>
</label><br><br>
<label class="switch">
<input type="checkbox" id="switch4" onclick="switched(this)" checked>
<span class="slider"></span>
</label><br><br>
Etc...
I have added the use of LocalStorage to keep switch positions
values are inside switchList object:
const switchList =
{ switch_1: true
, switch_2: true
, switch_3: true
, switch_4: true
, switch_5: true
, switch_6: true
}
diretly build from the input checkbox list
You also need a form!
so when form element get any input change, by using event delegation you can set the checkbox value inside the switchList
then the switchList is copied into local storage
const switchersF = document.querySelector('form#switchers')
, memoSwitch = 'SwitchStorage'
, switchList = [...switchers.querySelectorAll('input[type=checkbox]')].reduce((s,el)=>{ s[el.name]=true;return s},{})
;
initSwitchs()
;
switchersF.onsubmit=e=>e.preventDefault() // disable submit form
;
switchersF.oninput=e=>
{
if (!e.target.matches('input[type=checkbox]')) return
switchList[e.target.name] = e.target.checked
setSwitchsMemo()
// console.log( switchList )
}
function initSwitchs()
{
let SwitchsMemo = localStorage.getItem(memoSwitch)
if (!SwitchsMemo)
{ setSwitchsMemo() }
else
{
for (let [key, value] of Object.entries( JSON.parse(SwitchsMemo) ))
{
switchersF[key].checked = value
}
}
}
function setSwitchsMemo()
{
localStorage.setItem(memoSwitch, JSON.stringify(switchList) )
}
#switchers label {
position: relative;
display: block;
float: left;
clear: both;
width: 60px;
height: 34px;
margin: .5em 1em;
}
#switchers input {
display: none;
}
#switchers span {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
#switchers span:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
#switchers input:checked+span {
background-color: #2196F3;
}
#switchers input:checked+span:before {
transform: translateX(26px);
}
#switchers input:focus+span {
box-shadow: 0 0 1px #2196F3;
}
<h2>Toggle Switch</h2>
<form id="switchers">
<label> <input type="checkbox" checked name="switch_1"> <span></span> </label>
<label> <input type="checkbox" checked name="switch_2"> <span></span> </label>
<label> <input type="checkbox" checked name="switch_3"> <span></span> </label>
<label> <input type="checkbox" checked name="switch_4"> <span></span> </label>
<label> <input type="checkbox" checked name="switch_5"> <span></span> </label>
<label> <input type="checkbox" checked name="switch_6"> <span></span> </label>
</form>
I was trying to make my radio button looks like checkbox. I have made it OK but the problem i am facing when i tried to fill it up with color. Means in default stage it's white and when i clicked it fills with black. But now i want to make it as different colors based on title and when i clicked it should filled with that color only. How do i make it ?
<label class="active">
Email
<span></span>
<input type="radio" name="n1" value="email" checked>
</label>
<label>
Phone
<span></span>
<input type="radio" name="n1" value="phone">
</label>
<label>
Address
<span></span>
<input type="radio" name="n1" value="address">
</label>
Fiddle
You can add data-title to your label and give color to that and i have made a new style element which will change your style attribute of the radio button.
please check the below code
$(document).ready(function() {
$('label').click(function() {
var title = $(this).data('title');
$('.active').removeClass("active");
$(this).addClass("active");
$("<style> label.active span:after{ background-color: "+title+";} </style>").appendTo("head");
});
$('input:checked').trigger('click');
});
label {
width: 125px;
display: block;
float: left;
}
label input {
display: none;
}
label span {
display: block;
width: 17px;
height: 17px;
border: 1px solid black;
float: left;
margin: 0 5px 0 0;
position: relative;
}
label.active span:after {
content: "";
position: absolute;
left: 3px;
right: 3px;
top: 3px;
bottom: 3px;
background: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<label class="active" data-title='red'>
Email
<span></span>
<input type="radio" name="n1" value="email" checked>
</label>
<label data-title='green'>
Phone
<span></span>
<input type="radio" name="n1" value="phone">
</label>
<label data-title='blue'>
Address
<span></span>
<input type="radio" name="n1" value="address">
</label>
<label data-title='orange'>
Address2
<span></span>
<input type="radio" name="n1" value="address">
</label>
<label data-title='#ff11dd'>
Using Color Code
<span></span>
<input type="radio" name="n1" value="address">
</label>
Having different colors based on a title (or a value)... I don't think it is possible with just CSS.
In revenge, since you exactly know their order, you can set different colors using nth-child(n).
Try:
label:nth-child(1).active span:after {
background: red;
}
label:nth-child(2).active span:after {
background: orange;
}
label:nth-child(3).active span:after {
background: green;
}
Updated Fiddle
I have the following code:
<img id="v1" src="pic1.jpg"><br>
<button onclick="document.getElementById('v1').src='pic1.jpg'">Before</button>
<button onclick="document.getElementById('v1').src='pic2.jpg'">After</button>
<br>
<img id="v2" src="pic3.jpg"><br>
<button onclick="document.getElementById('v2').src='pic3.jpg'">Before</button>
<button onclick="document.getElementById('v2').src='pic4.jpg'">After</button>
<br>
However, I would like to replace these 'Before' and 'After' buttons with a toggle switch (already made) in the form of a checkbox:
<label class="switchBA">
<input type="checkbox" checked>
<span class="slider"></span>
</label>
In a way that each time it's clicked it switches between the two functions. I guess this needs to be done inline since these are just two of many comparisons.
Thanks in advance.
P.S: I would like to do with only with JS. No need for jQuery or other frameworks.
Here's a nice way to achieve this by listening for the toggle in javascript and setting the image to that of the custom data attribute set under the image tag.
var toggleClass = document.getElementsByClassName("toggle");
var toggleFunction = function() {
var imageElement = this.parentElement.parentElement.getElementsByClassName("imageItem")[0];
if(this.checked){
imageElement.src = imageElement.getAttribute("data-image-2");
}else{
imageElement.src = imageElement.getAttribute("data-image-1");
}
};
for (var i = 0; i < toggleClass.length; i++) {
toggleClass[i].addEventListener('click', toggleFunction, false);
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {display:none;}
.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);
}
<h2>Toggle Image Demo</h2>
<div class="imageContainer">
<img class="imageItem" src="https://lorempixel.com/400/200/sports/5/Image1/" data-image-1="https://lorempixel.com/400/200/sports/5/Image1/" data-image-2="https://lorempixel.com/400/200/sports/6/Image2/">
<label class="switch">
<input class="toggle" type="checkbox">
<span class="slider"></span>
</label>
</div>
<div class="imageContainer">
<img class="imageItem" src="https://lorempixel.com/400/200/sports/5/Image1/" data-image-1="https://lorempixel.com/400/200/sports/5/Image1/" data-image-2="https://lorempixel.com/400/200/sports/6/Image2/">
<label class="switch">
<input class="toggle" type="checkbox">
<span class="slider"></span>
</label>
</div>
Taking this approach over CSS and Backgrounds or setting the second image URL in the javascript should help keep the code cleaner. Also by doing this, the code will be easier to scale to accommodate multiple images toggles on one page without changing the Javascript.
Try this.
function toggleImage(){
var el = document.getElementById("toggle")
if(el.checked){
document.getElementById("v1").src="https://picsee.co/images/social_facebook.png";
}
else{
document.getElementById("v1").src="https://picsee.co/images/social_twitter.png";
}
}
<img id="v1" src="https://picsee.co/images/social_facebook.png">
<label class="switchBA">
<input type="checkbox" id="toggle" checked onclick="toggleImage()">
<span class="slider"></span>
</label>
You can use onchange event to get the event on state change as below
function oncheckchange(e)
{
console.log(event.currentTarget.checked)
if(event.currentTarget.checked)
document.getElementById('v2').src='pic4.jpg'
else
document.getElementById('v2').src='pic3.jpg'
}
<img id="v1" src="pic1.jpg"><br>
<button onclick="document.getElementById('v1').src='pic1.jpg'">Before</button>
<button onclick="document.getElementById('v1').src='pic2.jpg'">After</button>
<br>
<img id="v2" src="pic3.jpg"><br>
<button onclick="document.getElementById('v2').src='pic3.jpg'">Before</button>
<button onclick="document.getElementById('v2').src='pic4.jpg'">After</button>
<br>
<label class="switchBA">
<input type="checkbox" checked onchange="oncheckchange()">
<span class="slider"></span>
</label>
The simplest way to do this is to set the image as the background image of an element and then toggle that CSS setting by toggling the class that defines it:
document.querySelector("input[type=checkbox]").addEventListener("click", function(){
document.querySelector(".slider").classList.toggle("otherImage");
});
div {
width:150px;
height:150px;
background-size:contain;
border:1px solid black;
}
/* This will be the default style used because the class is defined in the HTML */
.slider {
background-image:url("http://aws-cdn-01.shemazing.ie/wp-content/uploads/2015/09/disappointed-but-relieved-face.png");
}
/* This will be toggled on and off by the clicking of the checkbox. When it is
toggled on, it will override the previous background-image value. */
.otherImage {
background-image:url("https://au.res.keymedia.com/files/image/emoji.jpg");
}
<label class="switchBA">
<input type="checkbox" checked>
<div class="slider"></div>
</label>
First of all you should never execute code in a handler the way you do. It's doable but in terms of readibility and maintainability it sucks, the handlers should only be used to fire a function.
It's fairly simple to achieve what you want.
put the toggle code inside a div and put the image and the newly created div inside a container div.
The div holding the toggle should include "display:none" in the css from the beginning so it is not shown, once you click on the button, you just need to hide the image and show the toggle switch div by changing "display:none" to "display:block";
Something like
<div class="container">
<img id="image1"src="https://openclipart.org/download/216413/coniglio_rabbit_small.svg" alt="">
<div id="toggle">
<img id="image2"src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/256/sign-check-icon.png" alt="">
</div>
<button onclick="Change()">Click me</button>
</div>
https://codepen.io/anon/pen/rYGMYx
<label class="black">Blacks
<input type="checkbox">
<span class="checkmark"></span>
</label>
I want to apply below CSS for my <label> when checkbox is checked:
border-bottom: 1px solid #7f7f7f;
Can anyone help me to resolve?
If you are open to modifying your HTML structure slightly, you could do this without any Javascript.
You need to place the label after the input, so it allows selecting the label using the adjacent selector (+), and then based on :checked pseudo selector, you can toggle the border on the label.
Check the snippet below to see how it works:
#myCheckbox:checked + label {
border-bottom: 1px solid #7f7f7f;
}
<input type="checkbox" id="myCheckbox">
<label class="black" for="myCheckbox">
Blacks
<span class="checkmark"></span>
</label>
Use parent() and toggleClass method from jquery to select the label and add/remove class
function toggleCheck(elem) {
console.log(elem)
$(elem).parent().toggleClass('borderBottom')
}
.borderBottom {
border-bottom: 1px solid #7f7f7f;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="black">Blacks
<input type="checkbox" onchange="toggleCheck(this)">
<span class="checkmark"></span>
</label>
label{
position: relative;
}
.checkmark{
position: absolute;
width: 100%;
left: 0;
bottom: -4px;
height: 1px;
background: red;
}
input:checked + .checkmark{
background: green;
}
<label class="black">Blacks
<input type="checkbox">
<span class="checkmark"></span>
</label>
Find your checkbox inside your span and use add remove class.
$('.black').find('input[type=checkbox]').change(function() {
if (this.checked)
$(this).parent().addClass('testClass');
else
$(this).parent().removeClass('testClass');
});
.testClass {
border-bottom: 1px solid #7f7f7f;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="black">Blacks
<input type="checkbox">
<span class="checkmark"></span>
</label>
<label class="black">Blacks
<input type="checkbox">
<span class="checkmark"></span>
</label>
$( 'label' ).on( 'click', 'input:checkbox', function () {
$( this ).parent().toggleClass( 'highlight', this.checked );
});
Apply below style for label in css
label.highlight{border-bottom: 1px solid #7f7f7f;