when slider is checked and unchecked

Question

I am trying to do things when a slider is unchecked and checked.

I have a lot of these questions on stack but none of them seem to work for me this is what I have tried already:

$(function() {
    $('.slider').on('click', (event) => {
        console.log(event);
        $("#checkout-ms").css("border-color", "#bf0d33");
        $("#checkout-ms").prop('disabled', false);
    });
});

this works well when I check the slider but doesnt do anything when I uncheck the slider. I have tried this as well:

$(function() {
    $('.slider').on('change', function(e) {
        if($(this).is(':checked')) {
            $("#checkout-ms").css("border-color", "#bf0d33");
            $("#checkout-ms").prop('disabled', false);
      } else {
        $("#checkout-ms").css("border-color", "#605e5e");
        $("#checkout-ms").prop('disabled', true);
      }
    });
});

here is the html for the slider:

<label class="switch">
<input type="checkbox">
<span class="slider"></span>
</label>

I want something to happen when I check the slider and something to happen when I uncheck the slider.

Any Help is appreciated. Thank You <3!

Which kind of slider are you talking about? It is the jQuery-ui Slider? If possible, add to tour question by [edit]ing it, the relevant HTML too — Calvin Nunes, Aug 31 '18 at 12:19
with your current HTML, `.slider` is just a span, it doesn't have a `checked` property[ — Calvin Nunes, Aug 31 '18 at 12:23
Possible duplicate of [How to check whether a checkbox is checked in jQuery?](https://stackoverflow.com/questions/901712/how-to-check-whether-a-checkbox-is-checked-in-jquery) — Calvin Nunes, Aug 31 '18 at 12:27
Above question will show will how to handle a checked checkbox, then in the `if..else` you just do what you want — Calvin Nunes, Aug 31 '18 at 12:28

score 0 · Accepted Answer · answered Aug 31 '18 at 12:44

What I thinks, you are looking something like this.

$('.slider').click(function() {
  var checkbox = $('input[type="checkbox"]');
  if ($(checkbox).prop('checked')) {
    console.log("Was Checked");
    //do stuffs
  } else {
    console.log("Was Not Checked");
    //do stuffs
  }
});

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  margin: 10px;
}

.switch input {
  display: none;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #555;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: #fff;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

input:checked+.slider {
  background-color: #2196f3;
}

input:focus+slider {
  box-shadow: 0px 0px 1px #2196f3;
}

input:checked+.slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="switch">
<input type="checkbox">
<span class="slider"></span>
</label>

Let me know, if this is helpful or not.

thank you, there was a small weird glitch tho, every time i checked the slider on for the first time nothing happend, so then I unchecked it and and the checked stuff appeared when it was unchecked and the unchecked stuff appeared when it was checked. Ur also getting the same error in your code snippet. Take a look at it. The first check shows unchecked then checked when it is unchecked — , Aug 31 '18 at 19:21
chrome extension @iNullPointer when your slider is checked, the console says was not checked — , Sep 01 '18 at 02:36
The message it print is `Was Checked` and `Was Not Checked`. — Anshuman, Sep 01 '18 at 02:39
`Was Checked` means it is `Unchecked` now and vice versa @developer12 — Anshuman, Sep 01 '18 at 02:40

when slider is checked and unchecked

1 Answers1