I am trying to create a toggle button. Here is the code: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_switch
In my javascript code - I read the 'checkbox' value. If the value is true then I add another div and this another div also has a close button. When the close button is hit, I remove this newly added div from the dom.
So far this all works fine.
I also want to toggle back the button. I am setting up the value to false with the following line:
document.getElementsByName("addUserConfirmation").checked = false;
It does set the value to false, but the toggle button still remain blue. How do I set it back to off?
Here is the code snippet:
function removeCardRevertToggleButton(button, container) {
var parentContainer = document.getElementById(container);
jQuery(parentContainer).children().remove();
document.getElementsByName("addConfirmation").checked = false;
}
<div class="boxStyle">
<span class="closeButton" requestid="" onclick="removeCardRevertToggleButton(this, "inviteContainerContext")">×</span>
</div>
Here is the jsfiddle:
https://jsfiddle.net/u9y2w8ev/15/
When close ('x') button is clicked, I want to switch the toggle button to off.
document.getElementsByName("addConfirmation") returns an array (Elements). You have to access an array element like this
document.getElementsByName("addUserConfirmation")[0].checked
function removeCardRevertToggleButton(button) {
document.getElementsByName("addUserConfirmation")[0].checked = false;
}
.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%;
}
<body>
<label class="switch">
<input type="checkbox" name="addUserConfirmation" checked>
<span class="slider round"></span>
</label>
<div class="boxStyle">
<span class="closeButton" onclick='removeCardRevertToggleButton(this)'>×
</span>
</div>
</body>
I have updated fiddle as https://jsfiddle.net/k086xnpd/
HTML Code:
<body>
<label class="switch">
<input type="checkbox" id="test" name="addUserConfirmation" checked>
<span class="slider round"></span>
</label>
<div class="boxStyle">
<span class="closeButton" onclick='removeCardRevertToggleButton(this)'>×
</span>
</div>
</body>
JS Code:
function removeCardRevertToggleButton(button) {
alert("Clicked, new value = " + button.checked);
//var parentContainer = document.getElementById(container);
//jQuery(parentContainer).children().remove();
document.getElementById("test").checked = false;
document.getElementById("test").addClass('slider:before');
}
Hoping that is what you were looking for :)
Related
I have a toggle that show or hide a div class. The status toggle is saved in local storage, so after page refresh the desired setting is maintained.
Now I'm trying to get another toggle that performs the same functions on a different class. I tried with a simple copy / paste changing the names of the classes and functions, but it doesn't work.
Can anyone give me a suggestion?
Fiddle: https://jsfiddle.net/snake93/s0rx4ube/9/
function save() {
var checkbox = document.getElementById("ck1");
localStorage.setItem("ck1", JSON.stringify(checkbox.checked));
}
function isChecked(isOn) {
if (isOn === true) {
$(".hideme").show();
} else {
$(".hideme").hide();
}
}
//for loading
var checked = JSON.parse(localStorage.getItem("ck1"));
document.getElementById("ck1").checked = checked;
console.log(checked);
$(document).ready(function(){
isChecked(checked)
$(".switch input").on("change", function(e) {
const isOn = e.currentTarget.checked;
console.log(isOn)
isChecked(isOn);
});
});
.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%;
}
/*END OF TOGGLE SWITCH*/
.hideme {
padding:20px;
background: blue;
color: white;
font-weight: 800;
text-align: center;
}
<!-- jQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<label class="switch">
<input type="checkbox" id="ck1" onchange="save()">
<span class="slider round hide-off"></span>
</label>
<br><br>
<div class="hideme">Please hide me, but bring me back later ;-)</div>
I believe you can have more dynamism by making better use of css selectors and adding an attribute with the same input id to the divs you intend to show/hide.
HTML:
<label class="switch">
<input type="checkbox" id="ck1">
<span class="slider round hide-off"></span>
</label>
<br><br>
<label class="switch">
<input type="checkbox" id="ck2">
<span class="slider round hide-off"></span>
</label>
<br><br>
<div class="hideme" id="label-ck1">Please hide me...</div>
<div class="hideme" id="label-ck2">Please hide me...</div>
JAVASCRIPT
$(document).ready(function(){
getLocalStatus()
$(".switch input").on("change", function(e) {
const element = e.currentTarget;
saveStatus(element)
setLabelVisibility(element.getAttribute('id'),element.checked);
})
})
function getLocalStatus() {
const checkboxes = $('input[type=checkbox]');
checkboxes.each(function(index,checkbox){
const checkboxId = checkbox.getAttribute('id')
var currentStatus= localStorage.getItem(checkboxId)
if (currentStatus == "true") {
currentStatus = true;
} else {
currentStatus = false;
}
checkbox.checked = currentStatus;
setLabelVisibility(checkboxId, currentStatus)
})
}
function setLabelVisibility(id,status){
const label = $("#label-" + id + "");
if(status == false){
label.hide();
return;
}
label.show();
}
function saveStatus(e) {
localStorage.setItem(e.getAttribute('id'), e.checked)
}
You need to give your show/hide DIVs different IDs and pass those into the function. (this is just one of several ways)
The element you want to show/hide needs a unique ID so we can differentiate it from the others, so forget about using a class as a selector here. The toggle function takes two parameters, the element that called it and the element ID that gets toggled. In the HTML below, 'this' will refer to that specific checkbox when its clicked. '#div1' and '#div2' are the IDs of the elements to toggle.
I've added in your local storage bit.
function toggle(p, c){
if ($(p).prop("checked")){
$(c).show();
}else{
$(c).hide();
}
localStorage.setItem($(p).attr("id"), JSON.stringify($(p).prop("checked")));
}
.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%;
}
/*END OF TOGGLE SWITCH*/
.hideme{
padding:20px;
background: blue;
color: white;
font-weight: 800;
text-align: center;
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="switch">
<input type="checkbox" id="ck1" onchange="toggle(this, '#div1')">
<span class="slider round hide-off"></span>
</label>
<label class="switch">
<input type="checkbox" id="ck2" onchange="toggle(this, '#div2')">
<span class="slider round hide-off"></span>
</label>
<br><br>
<div id="div1" class="hideme">Please hide me, but bring me back later ;-)</div>
<div id="div2" class="hideme">Please hide me, but bring me back later ;-)</div>
This is another possible solution and one that I would prefer:
Change the input as so:
<input type="checkbox" id="ck1" class="btn" data-toggle-id="#div1">
Then the javascript (with jquery) would look like this instead:
$('.btn').on('change', function(){
var $d = $($(this).attr('data-toggle-id'));
if ($(this).prop("checked")){
$d.show();
}else{
$d.hide();
}
});
iam desiging a web site that can change the prices
when for first time i click on slider the price become 19.99 and for the next time my price become 199.99.
my project is this https://www.frontendmentor.io/challenges/pricing-component-with-toggle-8vPwRMIC
im using a variable if the variable ==1 then change the price to 199.99 and when the variable ==2 then change price to 19.99 ; but every time i click the price stays on 19.99:/
$(function(){
var m = 1;
$(".switch").click(function(){
if(m == 1){
alert("hi");
$("#h1").html("$199.99");
$("#h2").html("$249.99");
$("#h3").html("$399.99");
m = 0;
} else{
alert("bye");
$("#h1").html("$19.99");
$("#h2").html("$24.99");
$("#h3").html("$39.99");
m = 0;
}
});
});
when i click both hi and bye alerts ,alerted and i dont know why ???:///
the return statment in if block also doesn't the solution, i tried.
As far as I think price ain't defined.
$(".switch").click(function(){
if(document.getElementById('isAgeSelected').checked) {
$("#h1").html("$199.99");
$("#h2").html("$249.99");
$("#h3").html("$399.99");
} else {
$("#h1").html("$19.99");
$("#h2").html("$24.99");
$("#h3").html("$39.99");
}
});
$(document).ready(function(){
if(document.getElementById('isAgeSelected').checked) {
$("#h1").html("$199.99");
$("#h2").html("$249.99");
$("#h3").html("$399.99");
} else {
$("#h1").html("$19.99");
$("#h2").html("$24.99");
$("#h3").html("$39.99");
}
});
.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%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="switch">
<input type="checkbox" id="isAgeSelected" value="Yes">
<span class="slider"></span>
</label>
<div id="h1"></div>
<div id="h2"></div>
<div id="h3"></div>
I HOPE THIS MIGHT SOLVE YOUR PROBLEM IN A EASY WAY
Considering your limited code, I tried recreating it:
Looks like you're not passing prices values correctly, the if and else conditions are correct, you can change the values in the first line and try checking it, I was able to run both the conditions. The issues seems you're not sending the correct values to prices.
var prices = 0; /* change to you values here from 0 to 1 */
$(document).ready(function() {
var m = 1;
$(".divSwitch").click(function() {
if (prices == 1) {
alert("hi");
$("#h1").html("$199.99");
$("#h2").html("$249.99");
$("#h3").html("$399.99");
m = 0;
} else {
alert("bye");
$("#h1").html("$19.99");
$("#h2").html("$24.99");
$("#h3").html("$39.99");
m = 0;
}
});
});
.divSwitch {
background-color: red;
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="divSwitch" sytle="height:50px;width:50px;background-color:red;">Click here.
<div id="h1"></div>
<div id="h2"></div>
<div id="h3"></div>
</div>
Can someone please help me? I need to be able to close this modal when I click outside the content; this is my code:
$(document).ready(function(){
$(".add-roles-btn").click(function(){
$("#modal1").addClass("show-modal");
});
});
.overlay {
height: 100vh;
width: 100%;
position: fixed;
top: 0;
left: 0;
background-color: rgba(50, 65, 97, 0.5);
z-index: 9999;
opacity: 0;
visibility: hidden;
transition: all .3s; }
.overlay .cancel {
position: absolute;
width: 100%;
height: 100%;
cursor: default; }
.overlay__content {
position: absolute;
top: 44%;
left: 55.5%;
padding: 4.8rem 6.4rem;
width: 540px;
background-color: #ffffff;
box-shadow: 0 2rem 4rem rgba(81, 136, 255, 0.2);
border-radius: 3px;
display: table;
overflow: hidden;
opacity: 0;
transform: translate(-50%, -50%) scale(0.25);
transition: all .4s .2s; }
#media only screen and (max-width: 61.875em) {
.overlay__content {
top: 50%;
left: 50%; } }
#media only screen and (max-width: 47em) {
.overlay__content {
padding: 4rem 6.5rem;
width: 500px; } }
#media only screen and (max-width: 37.5em) {
.overlay__content {
padding: 4rem 6.5rem;
width: 100%; } }
.show-modal {
opacity: 1;
visibility: visible; }
.show-modal .overlay__content {
opacity: 1;
transform: translate(-50%, -50%) scale(1); }
<button type="button" class="add-roles-btn"><i class="material-icons icon--middle icon--pr-8">add</i>Add roles</button>
<!-- Pop up modal -->
<div class="overlay" id="modal1">
<div class="overlay__content">
<h3 class="heading-primary">Add role</h3>
<form action="#">
<div class="form__group">
<input type="text" class="form__input" id="role_title">
<label for="role_title" class="form__label">Role Title</label>
</div>
<div class="form__group">
<textarea name="" class="form__input resize-none u-margin-bottom-0" id="role_description" rows="5"></textarea>
<label for="role_description" class="form__label">Role Description</label>
</div>
<div class="align-right">
<button class="btn btn--primary capitalize add-role-btn">Add Role <i class="material-icons icon--sub add-modal-role">add</i></button>
</div>
</form>
</div>
</div>
<!-- Pop up modal -->
As you can see it has the JS code on click it shows the modal, but I am not able to change it when you click outside to be closed; how can this be done? I have created this from scratch. I do not want to use some library or something; can you help me? I am new on JavaScript and coding on general. I would really appreciate it; thank you.
Here is the updated code, basically the concept was listening to click events on the body and if the DOM parent chain on the element doesn't reach the modal modal1 - the click is outside of it and therefore the modal can be closed.
Another important note was calling e.stopPropagation as the body event would be called after the button event, causing the window to be closed. Calling e.stopPropgation would mean that when the button is clicked, the "larger" body event won't trigger.
$(document).ready(function(){
$(".add-roles-btn").click(function(e){
$("#modal1").addClass("show-modal");
// This is required so that when clicking the button the click event wont propogate to the body event
e.stopPropagation()
});
// This function listens to all clicks on the document and gets the event data e
$('body').click(function(e) {
target = e.target;
// If the clicked target isnt under modal1 - that means it won't be found in its parents
if (($(target)).parents('#modal1').length == 0) {
$("#modal1").removeClass("show-modal");
}
})
});
$(document).ready(function(){
$(".add-roles-btn").click(function(e){
$("#modal1").addClass("show-modal");
// This is required so that when clicking the button the click event wont propogate to the body event
e.stopPropagation()
});
// This function listens to all clicks on the document and gets the event data e
$('body').click(function(e) {
target = e.target;
// If the clicked target isnt under modal1 - that means it won't be found in its parents
if (($(target)).parents('#modal1').length == 0) {
$("#modal1").removeClass("show-modal");
}
})
});
.overlay {
height: 100vh;
width: 100%;
position: fixed;
top: 0;
left: 0;
background-color: rgba(50, 65, 97, 0.5);
z-index: 9999;
opacity: 0;
visibility: hidden;
transition: all .3s; }
.overlay .cancel {
position: absolute;
width: 100%;
height: 100%;
cursor: default; }
.overlay__content {
position: absolute;
top: 44%;
left: 55.5%;
padding: 4.8rem 6.4rem;
width: 540px;
background-color: #ffffff;
box-shadow: 0 2rem 4rem rgba(81, 136, 255, 0.2);
border-radius: 3px;
display: table;
overflow: hidden;
opacity: 0;
transform: translate(-50%, -50%) scale(0.25);
transition: all .4s .2s; }
#media only screen and (max-width: 61.875em) {
.overlay__content {
top: 50%;
left: 50%; } }
#media only screen and (max-width: 47em) {
.overlay__content {
padding: 4rem 6.5rem;
width: 500px; } }
#media only screen and (max-width: 37.5em) {
.overlay__content {
padding: 4rem 6.5rem;
width: 100%; } }
.show-modal {
opacity: 1;
visibility: visible; }
.show-modal .overlay__content {
opacity: 1;
transform: translate(-50%, -50%) scale(1); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="add-roles-btn"><i class="material-icons icon--middle icon--pr-8">add</i>Add roles</button>
<!-- Pop up modal -->
<div class="overlay" id="modal1">
<div class="overlay__content">
<h3 class="heading-primary">Add role</h3>
<form action="#">
<div class="form__group">
<input type="text" class="form__input" id="role_title">
<label for="role_title" class="form__label">Role Title</label>
</div>
<div class="form__group">
<textarea name="" class="form__input resize-none u-margin-bottom-0" id="role_description" rows="5"></textarea>
<label for="role_description" class="form__label">Role Description</label>
</div>
<div class="align-right">
<button class="btn btn--primary capitalize add-role-btn">Add Role <i class="material-icons icon--sub add-modal-role">add</i></button>
</div>
</form>
</div>
</div>
<!-- Pop up modal -->
You stated you don't want to use any library so here's a vanilla JS solution.
To provide that, I also "translated" your jQuery code to vanilla JS:
document.getElementsByClassName('add-roles-btn')[0].onclick = function() {
document.getElementById('modal1').classList.add('show-modal');
}
// This block hides the modal when the user clicks outside of it
window.onclick = function(event) {
if (event.target == document.getElementById('modal1')) {
document.getElementById('modal1').style.display = 'none';
}
}
Here's a working example with the rest of your code.
If you want the ability to re-open it, this should work:
var modal = document.getElementById('modal1');
document.getElementsByClassName('add-roles-btn')[0].onclick = function() {
modal.classList.add('show-modal');
}
window.onclick = function(event) {
if (event.target == modal) {
modal.classList.remove('show-modal');
}
}
Here's the updated code.
I have multiple checkboxes that have the same ID for different screen resolutions. When I click on the Check 1 label the checkmark gets highlighted. In the example provided both check 1 and check2 have the same IDs, when I click on check 1 I want the check mark of check 2 too also be highlighted and vice versa.
.checkmark {
display: inline-block;
width: 22px;
/*height: 22px;*/
height: 17px;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
margin-left: 50%;
margin-bottom: 1px;
}
.checkmark::before {
content: '';
position: absolute;
width: 3px;
height: 9px;
background-color: #ccc;
left: 11px;
top: 6px;
}
.checkmark {
cursor: pointer;
}
.checkmark::after {
content: '';
position: absolute;
width: 3px;
height: 3px;
background-color: #ccc;
left: 8px;
top: 12px;
}
input[type="checkbox"]:checked+.checkmark:before,
input[type="checkbox"]:checked+.checkmark:after {
background: linear-gradient(rgb(42, 104, 149) 0px, rgb(44, 109, 157) 100%);
}
<div class="menu-lg">
<label style="display: inline;color: #545454;font-weight:100;" dataid="' +this.ID +'">
<input type= "checkbox" style= "display:none;" id="10A">Check1
<span for="10A" class="checkmark"></span >
</label >
</div>
<div class="menu-sm">
<label style="display: inline;color: #545454;font-weight:100;" dataid="' +this.ID +'" >
<input type= "checkbox" style= "display:none;" id="10A">Check2
<span for="10A" class="checkmark"></span >
</label >
</div>
How do I highlight all the checkmarks of the same IDS?
Highlighting is in your case based on the :checked selector -> if the checkbox is checked, the span behind it is highlighted.
In your case you will need javascript to react on the onchange / click event on the checkbox and trigger the other checkbox aswell.
A basic setup how to use it, you will need to alter that to your needs:
// use click or onchange
document.getElementById('checkbox1').addEventListener('click', function () {
document.getElementById('checkbox2').click();
});
You can do it with this javascript code.
This code does the following:
Add an event listener to the change event of both check boxes.
Set the checked property of the other checkbox to the same value as the checked property of the checkbox where the change event triggered on.
Note: I changed the id's of the check boxes to make them unique.
document.getElementById('10A-1').addEventListener('change', function () {
document.getElementById('10A-2').checked = this.checked;
});
document.getElementById('10A-2').addEventListener('change', function () {
document.getElementById('10A-1').checked = this.checked;
});
.checkmark {
display: inline-block;
width: 22px;
/*height: 22px;*/
height: 17px;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
margin-left: 50%;
margin-bottom: 1px;
}
.checkmark::before {
content: '';
position: absolute;
width: 3px;
height: 9px;
background-color: #ccc;
left: 11px;
top: 6px;
}
.checkmark {
cursor: pointer;
}
.checkmark::after {
content: '';
position: absolute;
width: 3px;
height: 3px;
background-color: #ccc;
left: 8px;
top: 12px;
}
input[type="checkbox"]:checked+.checkmark:before,
input[type="checkbox"]:checked+.checkmark:after {
background: linear-gradient(rgb(42, 104, 149) 0px, rgb(44, 109, 157) 100%);
}
<div class="menu-lg">
<label style="display: inline;color: #545454;font-weight:100;" dataid="' +this.ID +'">
<input type= "checkbox" style= "display:none;" id="10A-1">Check1
<span for="10A-1" class="checkmark"></span >
</label >
</div>
<div class="menu-sm">
<label style="display: inline;color: #545454;font-weight:100;" dataid="' +this.ID +'" >
<input type= "checkbox" style= "display:none;" id="10A-2">Check2
<span for="10A-2" class="checkmark"></span >
</label >
</div>
//Run it after document ready
var checkbox = $('input[type="checkbox"]');
$(checkbox).on('click', function(){
if($(this).is(':checked')){
$(checkbox).prop('checked', true);
}
else{
$(checkbox).prop('checked', false);
}
});
I like to use checkbox in AngularJs for user's decision.
I can't catch checkbox's state change in my AngularJs code.
My html code is
<div ng-show="acceptrequest">
<label class="switchnmn">
<input type="checkbox" ng-change="stateChanged()" checked>
<div class="slidernmn round"></div>
</label>
<b style="font-size:15px">I am able to accept customer's any request date.</b>
</div>
AngularJs code is
$scope.stateChanged = function ( ) {
if(){ //If it is checked
$scope.acceptrequest = true;
}
else
$scope.acceptrequest = false;
}
When checkbox is checked, $scope.acceptrequest should be true and unchecked $scope.acceptrequest should be false. How can I do that?
I implemented checkbox is slider in css
.switchnmn {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switchnmn input {display:none;}
.slidernmn {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slidernmn:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slidernmn {
background-color: #2196F3;
}
input:focus + .slidernmn {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slidernmn:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slidernmn.round {
border-radius: 34px;
}
.slidernmn.round:before {
border-radius: 50%;
}
label, b {
vertical-align: middle;
}
Declare ng-model for the checkbox and now you can access the value of check box inside the controller.
<div ng-show="acceptrequest">
<label class="switchnmn">
<input type="checkbox" ng-model="checkBoxValue" ng-change="stateChanged()" checked>
<div class="slidernmn round"></div>
</label>
<b style="font-size:15px">I am able to accept customer's any request date.</b>
</div>
controller:
$scope.stateChanged = function ( ) {
if($scope.checkBoxValue){
$scope.acceptrequest = true;
}
else
$scope.acceptrequest = false;
}
add ngModel to checkbox and check that variable inside the if condition
angular.module("app",[])
.controller("ctrl",function($scope){
$scope.checkBtn = true;
$scope.acceptrequest = true;
$scope.stateChanged = function ( ) {
if($scope.checkBtn){ //If it is checked
$scope.acceptrequest = true;
}
else
$scope.acceptrequest = false;
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<div>
<label class="switchnmn">
<input type="checkbox" ng-change="stateChanged()" checked ng-model="checkBtn">
<div class="slidernmn round"></div>
</label>
<b ng-show="acceptrequest" style="font-size:15px">I am able to accept customer's any request date.</b>
</div>
</div>