Proto.io has a great solution for on/off switches and they're super easy to use. However, I'm having trouble figuring out how I add an event handler to the switch after I click it. Specifically, I'm asking how to determine the state that the switch is in after I click it.
I've tried checking the state of the <input> element checkbox but it doesn't seem to change using proto.io.
HTML and CSS follow:
.onoffswitch {
position: relative; width: 90px;
-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: 30px; padding: 0; line-height: 30px;
font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "ON";
padding-left: 10px;
background-color: #34A7C1; color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "OFF";
padding-right: 10px;
background-color: #EEEEEE; color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block; width: 18px; margin: 6px;
background: #FFFFFF;
position: absolute; top: 0; bottom: 0;
right: 56px;
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>
Thanks!
I handled the on / off change event in this way:
$("#myonoffswitch").change(function () {
// do some stuff
});
Then, to get the switch state, I used this code:
if ($("#myonoffswitch").is(":checked"))
// on
else
// off
Add an onclick event to the checkbox and check for this.checked.
<input type="checkbox" name="onoffswitch"
class="onoffswitch-checkbox" id="myonoffswitch" checked
onclick="alert(this.checked);">
EstevaoLuis's answer works fine and because I recently had to use it with and without jQuery, here are the snippets that you may find handy:
With jQuery:
$(document).ready(function() {
var onoffswitch1 = $("#myonoffswitch");
onoffswitch1.on("change", function() {
if (onoffswitch1.is(":checked")) console.log("1-ON");
else console.log("1-OFF");
});
});
Without jQuery:
var onoffswitch2 = document.querySelector('#myonoffswitch');
onoffswitch2.addEventListener("change", function(e) {
if (this.checked) console.log("2-ON");
else console.log("2-OFF");
}, false);
Demo:
$(document).ready(function() {
var onoffswitch1 = $("#myonoffswitch");
onoffswitch1.on("change", function() {
if (onoffswitch1.is(":checked")) console.log("1-ON");
else console.log("1-OFF");
});
});
var onoffswitch2 = document.querySelector('#myonoffswitch');
onoffswitch2.addEventListener("change", function(e) {
if (this.checked) console.log("2-ON");
else console.log("2-OFF");
}, false);
.onoffswitch {
position: relative;
width: 90px;
-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: 30px;
padding: 0;
line-height: 30px;
font-size: 14px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "ON";
padding-left: 10px;
background-color: #34A7C1;
color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "OFF";
padding-right: 10px;
background-color: #EEEEEE;
color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block;
width: 18px;
margin: 6px;
background: #FFFFFF;
position: absolute;
top: 0;
bottom: 0;
right: 56px;
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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
Related
I have one input type field which is google inspired input type with label animation which has onfocus event and In one of the Input fields has the Password field in which I have to apply eye-toggle functionality with onclick event. I am sharing a screenshot of the input type.
When I am trying to implement toggle functionality for passwords. onclick event is not able to trigger because of the onfocus event.
Here is the code for the toggle.
CSS and icon.
.form-row {
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.col-3 {
max-width: 485px;
-webkit-box-flex: 0;
flex: 0 0 485px;
}
.inputfield {
margin-bottom: 24px;
margin-right: 20px;
position: relative;
}
.inputfield .form-label{
position: absolute;
top: 23px;
left: 20px;
cursor: text;
transition: top 250ms ease-in-out, left 250ms ease-in-out, font-size 250ms ease-in-out
}
.inputfield input{
margin: 8px 0;
}
.inputfield-control {
width: 100%;
height: 50px;
border: 1.5px solid #C4C4C4;
border-radius: 5px;
outline: none;
background: none;
padding-left: 16px;
position: relative;
}
.inputfield-control:focus {
border: 1.5px solid #2464E4;
}
.inputfield-control:focus ~ .form-label {
top: 0px;
left: 20px;
font-size:13px;
font-weight: 400;
color: #232323;
background-color: #ffffff;
z-index: 10;
padding-left: 4px;
padding-right: 4px;
}
.inputfield-control:not(:placeholder-shown).inputfield-control:not(:focus)~.form-label {
top: 0px;
left: 20px;
font-size:13px;
font-weight: 400;
color: #232323;
background-color: #ffffff;
z-index: 10;
padding-left: 4px;
padding-right: 4px;
}
.show-password-icn {
font-size: 22px !important;
margin-top: -40px;
margin-right: 30px;
color: #767676;
float: right;
}
<link href="https://unpkg.com/ionicons#4.5.10-0/dist/css/ionicons.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ionicons/4.5.6/css/ionicons.min.css"></script>
Because of the Animation in the input field toggle click event is not even triggered.
$(document).on('click', '.toggle-password', function() {
$(this).toggleClass("icon ion-md-eye");
var input = $("#Password");
input.attr('type') === 'password' ? input.attr('type', 'text') : input.attr('type', 'password')
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-3 inputfield">
<input type="password" id="Password" name="Password" class="inputfield-control" placeholder=" ">
<label class="form-label">New Password</label>
<div class="input-group-append custom">
<span toggle="#password-field" class="icon ion-md-eye-off field-icon toggle-password show-password-icn"></span>
<br>
</div>
</div>
I have tried to perform another click event instead of the click event, but still, any of the click events are not working with Animation.
Please update some CSS as per below:
.inputfield-control {
width: 100%;
height: 50px;
border: 1.5px solid #C4C4C4;
border-radius: 5px;
outline: none;
background: none;
padding-left: 16px;
position: relative;
padding-right: 70px;
}
.input-group-append.custom {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 30px;
z-index: 1;
}
.show-password-icn {
font-size: 22px !important;
color: #767676;
}
Please let me know if you still have any issues.
Inside my Angular app , i ve this form template :
<div class="row">
<div class="col-md-4">
<div class="form-input">
<label>
<input required>
<span class="placeholder">Name</span>
<button class="reset_input border-0 bg-transparent p-0 m-0"><i class="icon-delete"></i>
</button>
</label>
<span class="error "><span class="alert-icon icon-error-severe" aria-hidden="true"></span>Caractère invalide</span>
</div>
</div>
<div class="col-md-4">
<div class="form-input">
<label>
<input required>
<span class="placeholder">Surname</span>
</label>
</div>
</div>
<div class="col-md-4">
<div class="form-input">
<label>
<input required>
<span class="placeholder">CIN</span>
</label>
</div>
</div>
<div class="col-md-4">
<div class="form-input">
<label>
<input required>
<span class="placeholder">Ville</span>
</label>
</div>
</div>
<div class="col-md-4">
<div class="form-input">
<label>
<input required>
<span class="placeholder">Departement</span>
</label>
</div>
</div>
</div>
And i'm applying this css :
.bloc_advanced_search {
padding-top: 0.938rem;
position: relative;
margin-bottom: 1.875rem;
padding-bottom: 0.938rem;
}
#search_collapse { padding-top: 1.563rem;}
#search_collapse.show {
padding-bottom: 2.813rem;
}
.bloc_advanced_search .title_home {
font-size: 1.875rem;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 1.13;
letter-spacing: normal;
color: #ffffff;
padding-bottom: 0.9375rem;
position: relative;
width: calc(100% - 3.75rem);
}
.bloc_advanced_search .title_home::after {
position: absolute;
bottom: 0;
left: 0;
width: 1.875rem;
height: 0.375rem;
content: "";
background: #ff7900;
}
.bloc_advanced_search .form-input {
margin: 0 0 1.25rem;
width: 100%;
}
.bloc_advanced_search .form-input label {
position: relative;
display: block;
width: 100%;
min-height: 2.813rem;
}
.bloc_advanced_search .form-input .placeholder {
position: absolute;
display: block;
top: 1.375rem;
z-index: 2;
font-size: 1.125rem;
transition: all 200ms ease-in-out;
width: 100%;
cursor: text;
color: #808080;
}
.bloc_advanced_search .form-input input {
background: #000;
position: absolute;
top: 0.625rem;
z-index: 1;
width: 100%;
font-size: 1.125rem;
border: 0;
border-bottom: 1px solid #d8d8d8;
transition: border-color 200ms ease-in-out;
outline: none;
padding: 0;
margin: 0;
color: #fff;
padding-right: 2.813rem;
border-radius: 0;
box-shadow: none;
outline: none;
}
.bloc_advanced_search .form-input input {
height: 2.813rem;
}
.bloc_advanced_search .form-input input::-ms-clear {
display: none;
}
.bloc_advanced_search .form-input input:focus,
.bloc_advanced_search .form-input input:valid {
border-bottom: 2px solid #fff;
}
.bloc_advanced_search .form-input input:focus + .placeholder,
.bloc_advanced_search .form-input input:valid + .placeholder {
top: 0;
cursor: inherit;
font-size: 0.75rem;
color: #808080;
}
.bloc_advanced_search .btn-bottom {
padding-top: 1.25rem;
}
.bloc_advanced_search .rectangle {
width: 3.125rem;
height: 3.125rem;;
padding: 1.188rem 1rem;
background-color: #ff7900;
color: #fff;
position: absolute;
right: 0.938rem;
top: 0;
}
.bloc_advanced_search .rectangle::after {
content: "\e93f";
font-family: icon-orange, sans-serif;
transform: rotate(90deg);
display: block;
font-size: 1.25rem;
vertical-align: top;
margin-top: -0.313rem;
}
.bloc_advanced_search .rectangle.disabled {
background-color: #333333;
color: #000;
}
.bloc_advanced_search.interne .rectangle {
top: -0.938rem;
}
.bloc_advanced_search.interne .rectangle[aria-expanded=false]::after {
transform: rotate(-90deg);
}
.bloc_advanced_search .reset_input {
position: absolute;
right: 0.625rem;
bottom: -0.188rem;
font-size: 1.5rem;
z-index: 2;
color: #fff;
line-height: normal;
}
My problem is in particular in IPAD mode ,
When changing my focus from an input to another , the IOS Keyboard seems to be closed and reopened betwen an input to another , that results me to double click each time on every input to get it fosused (and in parallel a close/open keyboard each time
My purpose , is to , to keep the keyboard appearing when flying from an input to another , and with a simple one ckick , setting focus on desired input and beeing able to write.
Of course when click outside the form or inputs zone , the keyboard should diseppear .
Is there any simple way to do it properly ??
i correct it
by changing z-index , and making the input in front of the placeholder
Furthemore i set the background of input as transparent to make the plaeholder visible also
.bloc_advanced_search .form-input input {
background: transparent; /* <- THIS */
position: absolute;
top: 0.625rem;
z-index: 3; /* <- THIS */
width: 100%;
font-size: 1.125rem;
border: 0;
border-bottom: 1px solid #d8d8d8;
transition: border-color 200ms ease-in-out;
outline: none;
padding: 0;
margin: 0;
color: #fff;
padding-right: 2.813rem;
border-radius: 0;
box-shadow: none;
outline: none;
}
I am looking for assistance with the JS to animate the placeholder to move above the input box on selection. I have trialled various pieces of coding and this seems to be the closest to achieve the result.
I have tried to apply the following JS Script but it seems to be throwing an error. It may be an error with the jquery.
If you can provide any help it would be much appreciated.
$('input').focus(function(){
$(this).parents('.billing_first_name_field').addClass('focused');
});
$('input').blur(function(){
var inputValue = $(this).val();
if ( inputValue == "" ) {
$(this).parents('.billing_first_name_field').removeClass('focused');
} else {
$(this).addClass('filled');
}
})
Here is the HTML and the CSS I have applied.
.formRow {
position: relative;
width: 100%;
}
.formRow--item {
display: block;
width: 100%;
}
.input-text {
position: relative;
padding: 15px 20px 11px;
width: 100%;
outline: none;
border: solid 1px rgb(149, 152, 154);
border-radius: 4px;
color: rgb(44, 50, 53);
letter-spacing: .2px;
font-weight: 400;
font-size: 16px;
resize: none;
transition: all .2s ease;
}
.screen-reader-text {
position: relative;
display: block;
width: 100%;
}
.screen-reader-text.active {
.placeholder {
top: -5px;
background-color: #ffffff;
color: #fd999a;
text-transform: uppercase;
letter-spacing: .8px;
font-size: 11px;
line-height: 14px;
transform: translateY(0);
}
}
.screen-reader-text:not(:focus):not(:hover) {
& ~ .placeholder {
color: #fec8c9;
}
}
.input-text {
&:focus,
&:hover {
border-color: red;
}
}
.placeholder {
position: absolute;
top: 50%;
left: 10px;
display: block;
padding: 0 10px;
color: rgb(149, 152, 154);
white-space: nowrap;
letter-spacing: .2px;
font-weight: normal;
font-size: 16px;
transition: all, .2s;
transform: translateY(-50%);
pointer-events: none;
user-select: none;
}
<div class="woocommerce-billing-fields__field-wrapper">
<p class="form-row form-row-first validate-required validate-required" id="billing_first_name_field" data-priority="">
<label for="billing_first_name" class="screen-reader-text"><abbr class="required" title="required">
</label>
<span class="woocommerce-input-wrapper">
<input type="text" class="input-text" name="billing_first_name" id="billing_first_name" placeholder="First name" value="" autocomplete="given-name">
</span>
</p>
Thanks very much!
I didn't waste my time fixing your bad indentation practices, but here's a quick and dirty solution:
$(function(){ // load
const inputText = $('.input-text');
inputText.focus(function(){
const t = $(this);
if(t.val() === ''){
t.addClass('fade_white');
setTimeout(()=>{
t.attr('placeholder', ''); t.removeClass('fade_white');
}, 270);
}
else{
t.attr('placeholder', '');
}
});
inputText.blur(function(){
$(this).attr('placeholder', 'First name');
});
});// end load
.formRow {
position: relative;
width: 100%;
}
.formRow--item {
display: block;
width: 100%;
}
.input-text {
position: relative;
padding: 15px 20px 11px;
width: 100%;
outline: none;
border: solid 1px rgb(149, 152, 154);
border-radius: 4px;
color: rgb(44, 50, 53);
letter-spacing: .2px;
font-weight: 400;
font-size: 16px;
resize: none;
transition: all .2s ease;
}
.screen-reader-text {
position: relative;
display: block;
width: 100%;
}
.screen-reader-text.active {
.placeholder {
top: -5px;
background-color: #ffffff;
color: #fd999a;
text-transform: uppercase;
letter-spacing: .8px;
font-size: 11px;
line-height: 14px;
transform: translateY(0);
}
}
.screen-reader-text:not(:focus):not(:hover) {
& ~ .placeholder {
color: #fec8c9;
}
}
.input-text {
&:focus,
&:hover {
border-color: red;
}
}
.placeholder {
position: absolute;
top: 50%;
left: 10px;
display: block;
padding: 0 10px;
color: rgb(149, 152, 154);
white-space: nowrap;
letter-spacing: .2px;
font-weight: normal;
font-size: 16px;
transition: all, .2s;
transform: translateY(-50%);
pointer-events: none;
user-select: none;
}
/* not my CSS above here - fix yours */
.input-text{
transition:color 0.25s ease-in-out; color:#000;
}
.input-text.fade_white{
color:#fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="woocommerce-billing-fields__field-wrapper">
<p class="form-row form-row-first validate-required validate-required" id="billing_first_name_field" data-priority="">
<label for="billing_first_name" class="screen-reader-text"><abbr class="required" title="required">
</label>
<span class="woocommerce-input-wrapper">
<input type="text" class="input-text" name="billing_first_name" id="billing_first_name" placeholder="First name" value="" autocomplete="given-name">
</span>
</p>
<!-- not my HTML - fix yours --->
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I am having a little problem with my code.
I want when the user clicks on any button it changes its color to the hover color and text color to white.
And when the user click the next button the previous one will come back to its previous state. Is it possible?
#charset "utf-8";
/* CSS Document */
.button {
display: inline-flex;
height: 40px;
width: 90px;
border: 2px solid #1A6893;
margin-top:20px;
color: #1A6893;
text-transform: uppercase;
text-decoration: none;
font-size: .8em;
letter-spacing: 1.5px;
align-items: center;
justify-content: center;
overflow: hidden;
}
a {
color: #1A6893;
text-decoration: none;
letter-spacing: 1px;
}
#button-3 {
position: relative;
overflow: hidden;
cursor: pointer;
}
#button-3 a {
position: relative;
transition: all .45s ease-Out;
}
#circle {
width: 0%;
height: 0%;
opacity: 0;
line-height: 40px;
border-radius: 50%;
background: #1A6893;
position: absolute;
transition: all .5s ease-Out;
top: 20px;
left: 70px;
color:#FFF;
}
#button-3:hover #circle {
width: 200%;
height: 500%;
opacity: 1;
top: -70px;
left: -70px;
}
#button-3:hover a {
color: #FFF;
}
.abc{
margin-top:20px;
}
.boxes {
margin: auto;
padding: 50px;
background: #484848;
}
/*Checkboxes styles*/
input[type="checkbox"] { display: none; }
input[type="checkbox"] + label {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 20px;
font: 14px/20px 'Open Sans', Arial, sans-serif;
color: #1a6893;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
input[type="checkbox"] + label:last-child { margin-bottom: 0; }
input[type="checkbox"] + label:before {
content: '';
display: block;
width: 20px;
height: 20px;
border: 1px solid #1a6893;
position: absolute;
left: 0;
top: 0;
opacity: .6;
-webkit-transition: all .12s, border-color .08s;
transition: all .12s, border-color .08s;
}
input[type="checkbox"]:checked + label:before {
width: 10px;
top: -5px;
left: 5px;
border-radius: 0;
opacity: 1;
border-top-color: transparent;
border-left-color: transparent;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.button:active{
color:#039;
background-color:#396;
}
<div class="row" style="padding:0px;">
<div class="col-1"><div class="button" id="button-3" onClick="changeColor();"><div id="circle"></div>Day</div></div>
<div class="col-1"><div class="button" id="button-3"><div id="circle"></div>Week</div></div>
<div class="col-1"><div class="button" id="button-3"><div id="circle"></div>Month</div></div>
<div class="col-1"><div class="button" id="button-3"><div id="circle"></div>Day Sheet</div></div>
</div>
Just add some rules for the "active" state.
Also, I changed all your IDs to classes. You should only provided unique identifiers in the ID attribute.
Furthermore, I changed the button-3:hover .circle rule to button-3:not(.active):hover .circle. This hides the animation of the circle when hovering over "active" buttons.
.button.active {
background-color: #396;
}
.button.active a {
color: #FFF;
}
.button-3:not(.active):hover .circle {
width: 200%;
height: 500%;
opacity: 1;
top: -70px;
left: -70px;
}
Then listen for the click, toggle the "active" class from all buttons:
Array.from(document.querySelectorAll('.button')).forEach(button => {
button.classList.toggle('active', button === e.currentTarget);
}
Example
Array.from(document.querySelectorAll('.button')).forEach(button => {
button.addEventListener('click', handleButtonClick);
});
function handleButtonClick(e) {
Array.from(document.querySelectorAll('.button')).forEach(button => {
button.classList.toggle('active', button === e.currentTarget);
});
}
#charset "utf-8";
/* CSS Document */
.button {
display: inline-flex;
height: 40px;
width: 90px;
border: 2px solid #1A6893;
margin-top: 20px;
color: #1A6893;
text-transform: uppercase;
text-decoration: none;
font-size: .8em;
letter-spacing: 1.5px;
align-items: center;
justify-content: center;
overflow: hidden;
}
.button.active {
background-color: #396;
}
.button.active a {
color: #FFF;
}
a {
color: #1A6893;
text-decoration: none;
letter-spacing: 1px;
}
.button-3 {
position: relative;
overflow: hidden;
cursor: pointer;
}
.button-3 a {
position: relative;
transition: all .45s ease-Out;
}
.circle {
width: 0%;
height: 0%;
opacity: 0;
line-height: 40px;
border-radius: 50%;
background: #1A6893;
position: absolute;
transition: all .5s ease-Out;
top: 20px;
left: 70px;
color: #FFF;
}
.button-3:not(.active):hover .circle {
width: 200%;
height: 500%;
opacity: 1;
top: -70px;
left: -70px;
}
.button-3:hover a {
color: #FFF;
}
.abc {
margin-top: 20px;
}
.boxes {
margin: auto;
padding: 50px;
background: #484848;
}
/*Checkboxes styles*/
input[type="checkbox"] {
display: none;
}
input[type="checkbox"]+label {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 20px;
font: 14px/20px 'Open Sans', Arial, sans-serif;
color: #1a6893;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
input[type="checkbox"]+label:last-child {
margin-bottom: 0;
}
input[type="checkbox"]+label:before {
content: '';
display: block;
width: 20px;
height: 20px;
border: 1px solid #1a6893;
position: absolute;
left: 0;
top: 0;
opacity: .6;
-webkit-transition: all .12s, border-color .08s;
transition: all .12s, border-color .08s;
}
input[type="checkbox"]:checked+label:before {
width: 10px;
top: -5px;
left: 5px;
border-radius: 0;
opacity: 1;
border-top-color: transparent;
border-left-color: transparent;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.button:active {
color: #039;
background-color: #396;
}
<div class="row" style="padding:0px;">
<div class="col-1">
<div class="button button-3">
<div class="circle"></div>Day</div>
</div>
<div class="col-1">
<div class="button button-3">
<div class="circle"></div>Week</div>
</div>
<div class="col-1">
<div class="button button-3">
<div class="circle"></div>Month</div>
</div>
<div class="col-1">
<div class="button button-3">
<div class="circle"></div>Day Sheet</div>
</div>
</div>
could you please tell me why checkbox is not unchecked in jquery or click event, not fire?
I have one checkbox in my demo.The user can uncheck this checkbox, but I am not able to uncheck this checkbox.here is my code
https://jsbin.com/lohaleleba/edit?html,css,js,output
$(function() {
function signUpAgreeCheckedEventHandler(e) {
e.preventDefault();
e.stopPropagation();
alert('--')
}
$('#signUpAgree_js').click(signUpAgreeCheckedEventHandler)
})
#toi-login .form ul li {
list-style: none;
margin-bottom: 22px;
}
#toi-login .checkbox {
display: block;
margin: 0 0 12px;
}
#toi-login p {
font-size: 14px;
line-height: 18px;
color: #222;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#toi-login .checkbox input[type="checkbox"] {
display: none;
}
#toi-login input {
display: block;
width: 100%;
line-height: normal;
border: 0;
font-size: 14px;
}
#toi-login .checkbox label:before {
content: "";
position: absolute;
left: 0px;
top: 2px;
height: 14px;
width: 14px;
line-height: 15px;
background: #ffffff no-repeat;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
border: 1px solid #b1b1b1;
border-radius: 2px;
}
#toi-login .checkbox input[type="checkbox"]:checked+label:before {
background: #3696de;
border-color: #3696de;
}
#toi-login .checkbox input[type="checkbox"]:checked+label:after {
position: absolute;
content: '';
border: solid #fff;
width: 5px;
height: 10px;
left: 4px;
top: 3px;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="toi-login">
<form class="form" action="#" autocomplete="off">
<ul>
<li class="checkbox">
<p> <input type="checkbox" checked="true" id="signUpAgree_js"> <label for="agree">I agree with the Terms & Conditions and Privacy Policy of Times of India</label> </p>
</li>
</ul>
</form>
</div>
could you please tell me how to uncheck or toggle this field
Just correct the label for attribute. The for attribute determines which input it is associated with and in this case, the ID of signUpAgree_js needs to be provided.
$(function() {
function signUpAgreeCheckedEventHandler(e) {
alert('--')
}
$('#signUpAgree_js').change(signUpAgreeCheckedEventHandler)
})
#toi-login .form ul li {
list-style: none;
margin-bottom: 22px;
}
#toi-login .checkbox {
display: block;
margin: 0 0 12px;
}
#toi-login p {
font-size: 14px;
line-height: 18px;
color: #222;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#toi-login .checkbox input[type="checkbox"] {
display: none;
}
#toi-login input {
display: block;
width: 100%;
line-height: normal;
border: 0;
font-size: 14px;
}
#toi-login .checkbox label:before {
content: "";
position: absolute;
left: 0px;
top: 2px;
height: 14px;
width: 14px;
line-height: 15px;
background: #ffffff no-repeat;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
border: 1px solid #b1b1b1;
border-radius: 2px;
}
#toi-login .checkbox input[type="checkbox"]:checked+label:before {
background: #3696de;
border-color: #3696de;
}
#toi-login .checkbox input[type="checkbox"]:checked+label:after {
position: absolute;
content: '';
border: solid #fff;
width: 5px;
height: 10px;
left: 4px;
top: 3px;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="toi-login">
<form class="form" action="#" autocomplete="off">
<ul>
<li class="checkbox">
<p> <input type="checkbox" checked id="signUpAgree_js"> <label for="signUpAgree_js">I agree with the Terms & Conditions and Privacy Policy of Times of India</label> </p>
</li>
</ul>
</form>
</div>
You need to fix 2 issues.
label for attribute must refer to the input id. In this scenario, it should be signUpAgree_js instead of agree.
<label for="signUpAgree_js">
I agree with the Terms & Conditions
and Privacy Policy of Times of India
</label>
It has to be a change event instead of a click event.
$(function(){
function signUpAgreeCheckedEventHandler(e) {
e.preventDefault();
e.stopPropagation();
alert('--')
}
$('#signUpAgree_js').change(signUpAgreeCheckedEventHandler)
})
Working Demo