CSS: Checkbox switch effect works only for the first checkbox

Question

I need to make that switching effect working on any single checkbox I click. For example, I'll check the second (styled) checkbox, it will automatically switch and all others will stay unaffected. Thx very much for help.

https://jsfiddle.net/99asehku/

HTML:

    <div class="onoffswitch">
    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
    <label class="onoffswitch-label" for="myonoffswitch">
        <span class="onoffswitch-inner"></span>
        <span class="onoffswitch-switch"></span>
    </label>
</div><br><br>
<div class="onoffswitch">
    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
    <label class="onoffswitch-label" for="myonoffswitch">
        <span class="onoffswitch-inner"></span>
        <span class="onoffswitch-switch"></span>
    </label>
</div><br><br>
<div class="onoffswitch">
    <input type="checkbox" name="onoffswitch1" class="onoffswitch-checkbox1" id="myonoffswitch1" checked>
    <label class="onoffswitch-label1" for="myonoffswitch1">
        <span class="onoffswitch-inner1"></span>
        <span class="onoffswitch-switch1"></span>
    </label>
</div>

CSS:

.onoffswitch {
    position: relative; width: 58px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
    display: none;
}
.onoffswitch-label {
    display: block; overflow: hidden; cursor: pointer;
    border: 2px solid #999999; border-radius: 20px;
}
.onoffswitch-inner {
    display: block; width: 200%; margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
    display: block; float: left; width: 50%; height: 10px; padding: 0; line-height: 10px;
    font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    box-sizing: border-box;
}
.onoffswitch-inner:before {
    content: "ANO";
    padding-left: 10px;
    background-color: #34A7C1; color: #FFFFFF;
}
.onoffswitch-inner:after {
    content: "NE";
    padding-right: 10px;
    background-color: #EEEEEE; color: #999999;
    text-align: right;
}
.onoffswitch-switch {
    display: block; width: 10px; margin: 0px;
    background: #FFFFFF;
    position: absolute; top: 0; bottom: 0;
    right: 44px;
    border: 2px solid #999999; border-radius: 20px;
    transition: all 0.3s ease-in 0s; 
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0px; 
}

I've taken the liberty of commenting out your JSFiddle link as you've intentionally gone around Stack Overflow's JSFiddle links must be accompanied by code warning by placing the link within a code block. I've also voted to close this question as you've provided no code in the body of the question itself. — James Donnelly
– James Donnelly, Commented Mar 2, 2016 at 11:08
I'm sorry, I didn't translated that error message for myself and I urgently needed to get any hint for solution of this prob. I'l be glad to see cleared that negative reputation. Thx — Filip CZ
– Filip CZ, Commented Mar 2, 2016 at 11:20

ketan · Accepted Answer · 2016-03-02 11:08:47Z

First of all id must be unique. Don't use same id for different element.

And make for for all different.

.onoffswitch {
    position: relative; width: 58px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
    display: none;
}
.onoffswitch-label {
    display: block; overflow: hidden; cursor: pointer;
    border: 2px solid #999999; border-radius: 20px;
}
.onoffswitch-inner {
    display: block; width: 200%; margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
    display: block; float: left; width: 50%; height: 10px; padding: 0; line-height: 10px;
    font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    box-sizing: border-box;
}
.onoffswitch-inner:before {
    content: "ANO";
    padding-left: 10px;
    background-color: #34A7C1; color: #FFFFFF;
}
.onoffswitch-inner:after {
    content: "NE";
    padding-right: 10px;
    background-color: #EEEEEE; color: #999999;
    text-align: right;
}
.onoffswitch-switch {
    display: block; width: 10px; margin: 0px;
    background: #FFFFFF;
    position: absolute; top: 0; bottom: 0;
    right: 44px;
    border: 2px solid #999999; border-radius: 20px;
    transition: all 0.3s ease-in 0s; 
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0px; 
}

<div class="onoffswitch">
    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
    <label class="onoffswitch-label" for="myonoffswitch">
        <span class="onoffswitch-inner"></span>
        <span class="onoffswitch-switch"></span>
    </label>
</div><br><br>
<div class="onoffswitch">
    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch1" checked>
    <label class="onoffswitch-label" for="myonoffswitch1">
        <span class="onoffswitch-inner"></span>
        <span class="onoffswitch-switch"></span>
    </label>
</div><br><br>
<div class="onoffswitch">
    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch2" checked>
    <label class="onoffswitch-label" for="myonoffswitch2">
        <span class="onoffswitch-inner"></span>
        <span class="onoffswitch-switch"></span>
    </label>
</div>

@FilipCZ glad to help. You can accept only one answer. not multiple.

Anuj Kumar · Accepted Answer · 2020-02-28 13:20:42Z

You should differentiate their id and ids should be same as label 'for' attribute:

<div class="onoffswitch">
        <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
        <label class="onoffswitch-label" for="myonoffswitch">
            <span class="onoffswitch-inner"></span>
            <span class="onoffswitch-switch"></span>
        </label>
    </div><br><br>
    <div class="onoffswitch">
        <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch1" checked>
        <label class="onoffswitch-label" for="myonoffswitch1">
            <span class="onoffswitch-inner"></span>
            <span class="onoffswitch-switch"></span>
        </label>
    </div><br><br>
    <div class="onoffswitch">
        <input type="checkbox" name="onoffswitch1" class="onoffswitch-checkbox1" id="myonoffswitch2" checked>
        <label class="onoffswitch-label1" for="myonoffswitch2">
            <span class="onoffswitch-inner1"></span>
            <span class="onoffswitch-switch1"></span>
        </label>
    </div>

Sharing updated fiddle please check: https://jsfiddle.net/anujAdmin/9w413j0k/

silviagreen · Accepted Answer · 2016-03-02 11:09:20Z

-1

You have to give to each checkbox switch a name and id unique.

Look at this: jsfiddle; the last one has its own id and name, while the second has the same id and name of the first. (Of course the css code must be repeated or rules modified to apply for each new id)

<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
    <span class="onoffswitch-inner"></span>
    <span class="onoffswitch-switch"></span>
</label>

answered Mar 2, 2016 at 11:09

silviagreen

1,7291 gold badge18 silver badges43 bronze badges

1 Comment

Filip CZ Over a year ago

Perfect silviagreen, I'm also very pleased you helped me.

Collectives™ on Stack Overflow

CSS: Checkbox switch effect works only for the first checkbox

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related