javascript - 选中和取消选中 slider 时

Question

我正在尝试在未选中和选中 slider 时执行操作。

我有很多这样的问题，但似乎没有一个对我有用，这是我已经尝试过的:

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

这在我选中 slider 时效果很好，但在我取消选中 slider 时却没有任何作用。我也试过这个:

$(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);
      }
    });
});

这是 slider 的 html:

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

我希望在选中 slider 时发生一些事情，而在取消选中 slider 时发生一些事情。

感谢任何帮助。谢谢<3!

Answer 1

我怎么看，你看起来像这样。

$('.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>

让我知道这是否有帮助。