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>
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>
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!
can someone tell me how can I change the other Toggle Switches to unchecked when I checked one of the toggle switch. I can do with checkbox but I found it very tricky with Javascript Toggle Switch
if (this.checked) {
$(":checkbox[value=switch-intermediate]").removeAttr("checked", null);
$(":checkbox[value=switch-expert]").removeAttr("Checked",null);
}
My code above works with checkbox but not Toggle Switch. I did see some other examples online from slack overflow like this one - Uncheck or turn off all checkbox based toggle switches when a new one is turned on?
But when I follow it, it still doesn't work. Thank you!
[jfiddle] (https://jsfiddle.net/jt100/4xjf1ano/3/)
With simple change event and .not(this)
By using $(".switch:not([checked])") no need to check if(this.checked)
To change checked/unchecked use .prop("checked" , true/false)
To prevent this checkbox from unchecked when unchecked others use .not(this)
$(".switch:not([checked])").on('change' , function(){
$(".switch").not(this).prop("checked" , false);
});
.switch-label {
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: 0.4s;
transition: 0.4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: 0.4s;
transition: 0.4s;
}
input:checked + .slider {
background-color: #5c13ec;
}
input:focus + .slider {
box-shadow: 0 0 1px #5c13ec;
}
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>
<div class="toggle-two">
<div>Novice</div>
<label class="switch-label">
<input class="switch" id="switch-novice" value="switch-novice" type="checkbox"/>
<span class="slider round"></span>
</label>
</div>
<div class="toggle-three">
<div>Intermediate</div>
<label class="switch-label">
<input class="switch" id="switch-intermediate" value="switch-intermediate" type="checkbox"/>
<span class="slider round"></span>
</label>
</div>
<div class="toggle-four">
<div>Expert</div>
<label class="switch-label">
<input class="switch" id="switch-expert" value="switch-expert" type="checkbox" />
<span class="slider round"></span>
</label>
</div>
Also if you've more switch s on another places .. you can use $(this).closest('CONTAINER').find('.switch').not(this)........ instead of $('.switch').not(this)..... SEE Example HERE
Change the inputs from checkboxes to radio buttons, and add a name="something" to each radio button, using the same "something" name on all the related buttons.
Basically, each input changes from this
<input class="switch" id="switch-novice"
value="switch-novice" type="checkbox" />
to this
<input class="switch" id="switch-novice"
value="switch-novice" type="radio" name="switch-choice" />
I have updated your fiddle
In the snippet below you will see that I am styling a radio button to look like a button. I am wanting these buttons to work just as the radio button would in its normal state. Right now both radio buttons are taking on the active class from my javascript on page load. This should only happen if they are selected.
Also, the fadeToggle from the if-statement that produces the extra input under the radio buttons is functioning as if the radio buttons are checkboxes. I have to click on the same button twice to de-activate it. I think this is based on the issue above.
Does anyone have any ideas what I am doing wrong?
var rsvpAns = $('.radioTransform');
rsvpAns.click(function() {
$('.radio', this).prop('checked', !$('.radio', this).prop('checked')).change();
var radioCheck = $('.radio', this).val();
$('.radioTransform', this).toggleClass('active');
console.log(radioCheck);
if (radioCheck == 'Yes') {
$('#ansYes').fadeToggle(400);
}
});
.radio {
display: none;
}
#pushR {
margin-right: 25px;
}
.radioTransform {
width: 220px;
display: inline-block;
vertical-align: top;
background: #dbc8ca;
cursor: pointer;
padding: 15px 0;
}
.radioTransform.active {
background: red;
}
.radioAnswer {
font-family: 'Open Sans', sans-serif;
font-size: .9rem;
text-align: center;
}
#ansYes {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="rsvpForm">
<div class="formField">
<div class="radioTransform" id="pushR">
<span class="radioAnswer">YES</span>
<input type="radio" value="Yes" class="radio">
</div>
<div class="radioTransform">
<span class="radioAnswer">NO</span>
<input type="radio" value="No" class="radio">
</div>
</div>
<div class="formField" id="ansYes">
<label class="label">How are you doing?</label>
<input type="text" class="input">
</div>
<input type="submit" value="Submit RSVP" id="submit">
</form>
You don't need Javascript at all for this - only some intelligent CSS and a slight restructuring of your markup. This change will even increase the semantic value and accessibility of your solution.
I have only added Javascript for some console.logging so you see the snippet works.
Please note that in order to make radio buttons work like expected, they need to share the name attribute, otherwise both can be "on".
const radios = Array.from(document.querySelectorAll('[name="yesno"]'))
for (const radio of radios) {
radio.addEventListener('change', function() {
value.textContent = document.querySelector('[name="yesno"]:checked').value
})
}
.radio {
display: none;
}
.radioAnswer {
width: 220px;
display: inline-block;
vertical-align: top;
background: #dbc8ca;
cursor: pointer;
padding: 15px 0;
transition-duration: .4s;
position: relative;
}
.radioAnswer::before {
display: inline-block;
content: "";
border-width: 0 2px 2px 0;
border-color: transparent;
border-style: solid;
width: 0;
height: 0;
transition: width .4s linear .1s,
height .2s linear 1.6s;
position: absolute;
left: 10px;
top: 50%;
transform: rotate(35deg) translateY(-50%);
transform-origin: center right;
}
input[type=radio]:checked+.radioAnswer {
background: #0a0;
color: #fff;
}
input[type=radio]:checked+.radioAnswer::before {
border-color: #fff;
transform: rotate(35deg) translateY(-50%);
height: 1.5em;
width: .8em;
transition: all .4s linear 0s, width .4s linear .1s, height .2s linear .3s
; position: absolute;
}
.radioAnswer {
font-family: 'Open Sans', sans-serif;
font-size: .9rem;
text-align: center;
}
<input type="radio" value="Yes" class="radio" name="yesno" id="yes">
<label class="radioAnswer" for="yes">Yes</label>
<input type="radio" value="No" class="radio" name="yesno" id="no">
<label class="radioAnswer" for="no">NO</label>
<p>Selected Value: <strong id="value"></strong></p>
Your if condition block only works when you clicked yes button. Then what if you clicked No, for this condition you can have else statement. And here in this code radioTransform div don't have active class on load.
var rsvpAns = $('.radioTransform');
rsvpAns.click(function() {
$('.radio', this).prop('checked', !$('.radio', this).prop('checked')).change();
var radioCheck = $('.radio', this).val();
console.log(radioCheck);
$(this).toggleClass('active');
if (radioCheck == 'Yes') {
$('#ansYes').fadeToggle(400);
if($(this).next('.radioTransform').hasClass('active')){
$(this).next('.radioTransform').removeClass('active');
}
} else {
$('#ansYes').fadeOut(400);
if($(this).prev('.radioTransform').hasClass('active')){
$(this).prev('.radioTransform').removeClass('active');
}
}
});
.radio {
display: none;
}
#pushR {
margin-right: 25px;
}
.radioTransform {
width: 220px;
display: inline-block;
vertical-align: top;
background: #dbc8ca;
cursor: pointer;
padding: 15px 0;
}
.radioTransform.active {
background: red;
}
.radioAnswer {
font-family: 'Open Sans', sans-serif;
font-size: .9rem;
text-align: center;
}
#ansYes {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="rsvpForm">
<div class="formField">
<div class="radioTransform" id="pushR">
<span class="radioAnswer">YES</span>
<input type="radio" value="Yes" class="radio">
</div>
<div class="radioTransform">
<span class="radioAnswer">NO</span>
<input type="radio" value="No" class="radio">
</div>
</div>
<div class="formField" id="ansYes">
<label class="label">How are you doing?</label>
<input type="text" class="input">
</div>
<input type="submit" value="Submit RSVP" id="submit">
</form>
In order to achieve the toggling effect of the radio button with the backgrounds, $('.radioTransform', this).toggleClass('active'); will not be enough.
First, taking into consideration it is already inside a click handler which is attached to $('.radioTransform'), when you add this as second argument of $('.radioTransform', this).toggleClass('active'); you are telling it to look for .radioTransforms inside a .radioTransform, cause you are setting .radioTransform as the context of the selector, that's why it does not change color. And even if you remove this, you would be toggling the class for every .radioTransform there is (how many times did I write radioTransform?:) )
Second, remove background: red from .radioTransform when it is not active, else you will never see it happen
var rsvpAns = $('.radioTransform');
rsvpAns.click(function() {
$('.radio', this).prop('checked', !$('.radio', this).prop('checked')).change();
var radioCheck = $('.radio', this).val();
$(this).toggleClass('active');
$(this).siblings('.radioTransform').toggleClass('active', !$(this).hasClass('active'));
console.log(radioCheck);
if (radioCheck == 'Yes') {
$('#ansYes').fadeToggle(400);
} else {
$('#ansYes').fadeOut(400);
}
});
.radio {
display: none;
}
#pushR {
margin-right: 25px;
}
.radioTransform {
width: 220px;
display: inline-block;
vertical-align: top;
background: #dbc8ca;
cursor: pointer;
padding: 15px 0;
}
.radioTransform {
/*background: red;*/
}
.radioAnswer {
font-family: 'Open Sans', sans-serif;
font-size: .9rem;
text-align: center;
}
#ansYes {
display: none;
}
.radioTransform.active {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="rsvpForm">
<div class="formField">
<div class="radioTransform" id="pushR">
<span class="radioAnswer">YES</span>
<input type="radio" value="Yes" class="radio">
</div>
<div class="radioTransform">
<span class="radioAnswer">NO</span>
<input type="radio" value="No" class="radio">
</div>
</div>
<div class="formField" id="ansYes">
<label class="label">How are you doing?</label>
<input type="text" class="input">
</div>
<input type="submit" value="Submit RSVP" id="submit">
</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