We Keep Coding

Is it possible to display a tooltip only when hovered over a checked radio button using jQuery

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>

JS function conflicting with CSS style

I have a radio button part into a large form which is styled in a way that when it's hovered or checked, it has a different background color. Though, I have an important js function for the rest of the form which keeps the style from working. It took me time to understand that the conflict came from that function, but I have no clue on how to solve this.
Here's what I got:
$("#general-form").on("click", "label", function() {
name_input = $(this).children("input").attr("name");
if (name_input) {
onglet = obj_critere_form.simulation_encours;
$("#simul_" + onglet + " input[name='" + name_input + "']").focus();
}
return false
});
obj_critere_form = new critere_form();
obj_critere_form.initialize();
#general-form .radio-toolbar input[type="radio"],
p {
display: none;
}
#general-form .radio-toolbar label {
display: inline-block;
background-color: #ddd;
padding: 4px 11px;
font-family: Arial;
font-size: 16px;
cursor: pointer;
}
#general-form .radio-toolbar label:hover {
background-color: #bbb;
}
#general-form .radio-toolbar input[type="radio"]:checked+label {
background-color: #bbb;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="general-form">
<div class="radio-toolbar">
<h2>Options:</h2>
</br>
<input type="radio" id="radio1" name="radios" value="a1">
<label for="radio1">option 1</label>
<input type="radio" id="radio2" name="radios" value="a2">
<label for="radio2">option 2</label>
<input type="radio" id="radio3" name="radios" value="a3">
<label for="radio3">option 3</label>
</div>
</div>

The problem is return false; in the click handler. That's equivalent to event.preventDefault();. The default action of clicking on a label is to click on the element that the label is associated with by the for attribute; return false; prevents that from happening, so clicking on the label doesn't check the button.
I'm not sure why you have that in the click handler in the first place. All it does is prevent clicking on the label from working.
$("#general-form").on("click", "label", function() {
name_input = $(this).children("input").attr("name");
if (name_input) {
onglet = obj_critere_form.simulation_encours;
$("#simul_" + onglet + " input[name='" + name_input + "']").focus();
}
//return false
});
//obj_critere_form = new critere_form();
//obj_critere_form.initialize();
#general-form .radio-toolbar input[type="radio"],
p {
display: none;
}
#general-form .radio-toolbar label {
display: inline-block;
background-color: #ddd;
padding: 4px 11px;
font-family: Arial;
font-size: 16px;
cursor: pointer;
}
#general-form .radio-toolbar label:hover {
background-color: #bbb;
}
#general-form .radio-toolbar input[type="radio"]:checked+label {
background-color: #bbb;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="general-form">
<div class="radio-toolbar">
<h2>Options:</h2>
</br>
<input type="radio" id="radio1" name="radios" value="a1">
<label for="radio1">option 1</label>
<input type="radio" id="radio2" name="radios" value="a2">
<label for="radio2">option 2</label>
<input type="radio" id="radio3" name="radios" value="a3">
<label for="radio3">option 3</label>
</div>
</div>

In this case it looks like you're using a library for the form which could have it's own styles.
Use this at the end of the CSS you need to come through but use it sparingly and with caution.
//example
color: blue !important;

toggle switch back to off

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!

Radio button filled with color

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

Radio button doesnt work inside css accordion

I have a radio button inside a css accordion and for some reason it doesnt work. Maybe the css I'm using for the accordion is overriding the radio button? maybe because the accordion is made from a check box that is causing problems? I've also put dojo controls inside the accordion and some work, some don't Below is the code: The first radio button outside the accordion works fine
HTML:
<input type="radio" name="colors" value="green" />Green <!--this works fine-->
<input type="radio" name="colors" value="red" />Red
<section id="accordionMTF">
<div>
<div style="width: 450px;
height: 80px"></div>
<input type="checkbox" id="checkMTF-1" checked="checked" />
<label for="checkMTF-1">Input System Info</label>
<article>
<input type="radio" name="colors" value="green" />Green <!--this doesnt work-->
<input type="radio" name="colors" value="red" />Red</article>
</div>
<div>
<input type="checkbox" id="checkMTF-2" />
<label for="checkMTF-3">Input Marking Information</label>
<article>
<p style="width: 450px;
height: 400px">Fill out form</p>
</article>
</div>
<div>
<input type="checkbox" id="checkMTF-3" />
<label for="checkMTF-4">Complete and Submit</label>
<article>
<p style="width: 450px;
height: 400px">Fill out form</p>
</article>
</div>
</section>
css:
/Mark Ticket Form Accordion/
#accordionMTF input {
display: none;
}
#accordionMTF label {
background: #eee;
border-radius: .25em;
cursor: pointer;
display: block;
margin-bottom: .125em;
padding: .25em 1em;
z-index: 20;
}
#accordionMTF label:hover {
background: #ccc;
}
#accordionMTF input:checked + label {
background: #ccc;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
color: white;
margin-bottom: 0;
}
#accordionMTF article {
background: #f7f7f7;
height:0px;
overflow:hidden;
z-index:10;
}
#accordionMTF article p {
padding: 1em;
}
#accordionMTF input:checked article {
}
#accordionMTF input:checked ~ article {
border-bottom-left-radius: .25em;
border-bottom-right-radius: .25em;
height: auto;
margin-bottom: .125em;
}
I have a fiddle:
here
Thanks

So long as you continue to use the same HTML structure, all you need to do is rework your css a little bit. The follow css
#accordionMTF input {
display: none;
}
Needs to look like this
#accordionMTF > div > input[type='checkbox'] {
display : none;
}
This is an excellent attempt to create an accordion without javascript. You might also consider incorporating CSS3 animations.
There is also a bug where your labels have the wrong for attribute value.
Here is a working fiddle http://jsfiddle.net/czo2m22s/21/

The developer of you accordion has decided to hide ALL inputs (!?)
#accordionMTF input {
display: none;
}
A more sane approach would be to give the inputs that are required for the accordion functionality a class (.hidden) and use that as a selector instead of blanket hidding all inputs:
<input type="checkbox" class="hidden" id="checkMTF-1" class="hidden" />
.hidden {
display: none;
}
WORKING EXAMPLE

here is the reason:
accordionMTF input {
display: none;
}