We Keep Coding

how to uncheck all Toggle Switch when one toggle switch is checked?

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

How to set a div (custom Radio-Button and Checkbox) as required?

I want to create custom and accessible Radio- and Checkbox-Buttons and found the nice solution of W3C, using divs and aria role="radio".
https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/radio/radio-1/radio-1.html
<div role="radiogroup" aria-labelledby="group_label_1" id="rg1">
<h3 id="group_label_1">Label</h3>
<div role="radio" aria-checked="false" tabindex="0">
Button
</div>
</div>
It looks and works great for me, but I want to implement Radio-Buttons as required fields of the form. Problem: in this solution is no input-element and for this reason no required-attribute possible..

The WAI-ARIA aria-required property indicates that user input is required before submission. The aria-required property can have values of "true" or "false". For example, if a user must fill in an field, then aria-required is set to "true".
<div role="radiogroup" aria-labelledby="group_label_1" aria-required="true" id="rg1">
<h3 id="group_label_1">Label</h3>
<div role="radio" aria-checked="false" tabindex="0">
Button
</div>
</div>

you only make it require with add a property
aria-checked = true
into first any radio.
ex:
<div role="radiogroup" aria-labelledby="group_label_1" id="rg1">
<h3 id="group_label_1">Label</h3>
<div role="radio" aria-checked="true" tabindex="0">
Button
</div>
<h3 id="group_label_2">Label2</h3>
<div role="radio" aria-checked="false" tabindex="1">
Button2
</div>
</div>

Check W3school custom radio button for creating custom radio buttons. and you can put required attribute to radio buttons check the following code for the demo.
<!DOCTYPE html>
<html>
<style>
/* The container */
.container {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default radio button */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* Create a custom radio button */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
border-radius: 50%;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #2196F3;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
display: block;
}
/* Style the indicator (dot/circle) */
.container .checkmark:after {
top: 9px;
left: 9px;
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
}
</style>
<body>
<h1>Custom Radio Buttons</h1>
<form method="post" action="https://facebook.com" target="_blank">
<label class="container">One
<input type="radio" required="" name="radio">
<span class="checkmark"></span>
</label>
<label class="container">Two
<input type="radio" name="radio" required="">
<span class="checkmark"></span>
</label>
<input type="submit" value="asd" />
</form>
</body>
</html>

You can simply add the required tag to your input elements.
Here's a working CodePen: https://codepen.io/anon/pen/zWzaKM

Fake radio button 1 option only

I am trying to simulate the behavior of a radio button but using, instead of and input tag, an span, in order to be easier to style with css. I can simulate the change of state, but I cannot figure out how to only let one button to be selected.
Here is my js for the 'change of state':
function CheckRadioButton() {
$(".radio-button").click(function () {
if ($(this).hasClass('checked')) {
$(this).removeClass('checked');
} else {
$(this).addClass('checked');
}
});
}
What I'd like to do is, if one button changes its class to selected, all the rest have to be 'unselected'.
Another problem I encounter is that I have several "categories" in which I use this type of buttons and I only want the only option inside of each category. For example:
<p class="fake-label">Skirt</p>
<div class="radio-button-wrapper">
<span class="radio-button"></span>
<span>Yes</span>
</div>
<div class="radio-button-wrapper">
<span class="radio-button"></span>
<span>No</span>
</div>
<p class="fake-label">Season</p>
<div class="radio-button-wrapper">
<span class="radio-button"></span>
<span>Summer</span>
</div>
<div class="radio-button-wrapper">
<span class="radio-button"></span>
<span>Winter</span>
</div>
How can I do to be able to 'choose' only one between yes/no and only one between 'summer/winter', but both at the same time?? (only two of this for spans can have class 'checked' at the same time)
Thank you :)

Try this
FIDDLE
Yo can add an additional div to group similar categories and update your jquery code like below.
HTML
<p class="fake-label">Skirt</p>
<div class="radio-group">
<div class="radio-button-wrapper">
<span class="radio-button"></span>
<span>Yes</span>
</div>
<div class="radio-button-wrapper">
<span class="radio-button"></span>
<span>No</span>
</div>
</div>
<p class="fake-label">Season</p>
<div class="radio-group">
<div class="radio-button-wrapper">
<span class="radio-button"></span>
<span>Summer</span>
</div>
<div class="radio-button-wrapper">
<span class="radio-button"></span>
<span>Winter</span>
</div>
</div>
Javascript
$(".radio-button").click(function () {
$(this).closest('div.radio-group').find(".radio-button").removeClass('checked');
$(this).addClass('checked');
});

You can combine the power of real inputs with the freedom of using other tags:
.input-wrap {
position: relative;
}
input[type="radio"] {
display: none;
}
input[type="radio"] + label {
padding-left: 22px;
}
input[type="radio"] + label:before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 10px;
height: 10px;
border: 2px solid black;
border-radius: 50%;
transform: translateY(-50%);
}
input[type="radio"]:checked + label:after {
content: "";
position: absolute;
left:3px;
top: 50%;
width: 8px;
height: 8px;
background-color: #bada55;
border-radius: 50%;
transform: translateY(-50%);
}
<div class="input-wrap">
<input type="radio" name="test" id="option1" checked><label for="option1">Option1</label>
</div>
<div class="input-wrap">
<input type="radio" name="test" id="option2"><label for="option2">Option1</label>
</div>
<div class="input-wrap">
<input type="radio" name="test" id="option3"><label for="option3">Option1</label>
</div>
It's kind like adding/removing classes like you did in your example, but instead we use the :checked + label selector to select the label of the currently checked input, that way we have the accessibility of real inputs (almost) and the freedom of writing our markup the way we want it to be.
And the best thing is this solution is css only and it can be used to hide/show entire sections of a page.
PS: I said "almost" the same accessibility because I think some screen readers will ignore inputs with display: none, to fix this you can still use:
position: absolute;
left: -99999px;
EDIT: Since it seams you really want to go down this fake-inputs, this should help:
$(".radio-button").click(function () {
$(".radio-button").removeClass('checked);
$(this).addClass('checked');
});

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;
}

Styling Checkbox

I am trying to insert an image instead of a check on the check box. The code that am using is:
<html>
<head>
<style>
.bl {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #175899), color-stop(0.5, #7da4bf), color-stop(3, #9fbed3));
width: 90%;
height:30px;
border-radius: 5px;
margin-right:auto;
margin-left:auto;
margin-top:10px;
margin-bottom:10px;
}
p
{
font-family:"Times New Roman";
font-size:10px;
}
checkbox
{
width: 75px;
height: 75px;
padding: 0 5px 0 0;
background: url(images/Green_tick.png) no-repeat;
display: block;
clear: left;
float: left;
}
.checked {
position: absolute;
width: 200px;
height: 21px;
padding: 0 24px 0 8px;
color: #fff;
font: 12px/21px arial,sans-serif;
background: url(images/Green_tick.png) no-repeat;
overflow: hidden;
}
</style>
</head>
<body>
<script>
function Checked(id)
{
if(id.checked==1)
{
alert("Checked");
}
else
{
alert("You didn't check it! Let me check it for you.")
id.checked = 1;
}
}
</script>
<div class="main_menu">
<a id='menu' href="javascript:" onclick="loadMenuPage();"></a>
</div>
<p>
All verifications required for QR7 can be uploaded here. Any item which still requires verification is
marked in red until picture has been attached.
</p>
<div class="bl">
<input type="checkbox" id="checkbox" class="checkbox" onclick="Checked(id);"> Income </input>
</div>
<div class="bl">
<input type="checkbox" id="checkbox" class="checkbox" onclick="Checked(id);"> Property </input>
</div>
<div class="bl">
<input type="checkbox" id="checkbox" class="checkbox" onclick="Checked(id);"> Court Order Child Support </input>
</div>
<div class="bl">
<input type="checkbox" id="checkbox" class="checkbox" onclick="Checked(id);"> Future Medical Child Support </input>
</div>
</body>
</html>
Any suggestions on how do i achieve it. As of now i get a normal tick in the checkbox.
Thanks in advance.

This post is old but this is what i suggest:
Associate labels to your checkboxes like this:
<input type="checkbox" value="1" id="c1" />
<label class="check" for="c1"></label>
Hide by css your checkboxes:
.checkboxes input[type=checkbox]{
display:none
}
Style the label as you want to. I created a simple jsfiddle that fully demonstrate how to use personnalise checkboxes. I use backgrond-color in this example, but you could easily use your background image instead.
Here is the jsfiddle

Styling checkboxes using CSS is a nightmare and you'll never achieve the look you want. Try using a jQuery plugin, most of them 'hide' the checkbox by positioning the input off the visible screen and use a span replacement with a background image that you can edit to suit your needs.
Something like:
http://www.protofunc.com/scripts/jquery/checkbox-radiobutton/
Also check this thread:
Pure CSS Checkbox Image replacement