使用jQuery

Question

我目前有一个基本的HTML页面，其中包含2个复选框。

我有一个jQuery脚本，当复选框更改时，会向复选框添加或删除一个类，以显示是否选中。我不能同时制作多个复选框。这是我的HTML和JS：

<link href="style.css" rel="stylesheet" type="text/css">

<div class="checkbox-field w-checkbox w-clearfix">
  <div class="checkbox-handle"></div>
  <input class="checkbox-input w-checkbox-input" data-name="Checkbox" id="checkbox" name="checkbox" type="checkbox">
  <label class="checkbox-label w-form-label" for="checkbox"></label>
</div>

<div class="checkbox-field w-checkbox w-clearfix">
  <div class="checkbox-handle"></div>
  <input class="checkbox-input w-checkbox-input" data-name="Checkbox2" id="checkbox2" name="checkbox2" type="checkbox">
  <label class="checkbox-label w-form-label" for="checkbox"></label>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

<script type="text/javascript">
// Checkbox
    $('#checkbox').change( function(){
        if ($(this).is(':checked')) {
            $(this).prev('.checkbox-handle').addClass('checked');
            $(this).next('.checkbox-label').addClass('checked');
        }else{
            $(this).prev('.checkbox-handle').removeClass('checked');
            $(this).next('.checkbox-label').removeClass('checked');
        }
    });

    $('#checkbox2').change( function(){
        if ($(this).is(':checked')) {
            $(this).prev('.checkbox-handle').addClass('checked');
            $(this).next('.checkbox-label').addClass('checked');
        }else{
            $(this).prev('.checkbox-handle').removeClass('checked');
            $(this).next('.checkbox-label').removeClass('checked');
        }
    });
</script>

这是我的CSS：

.checkbox-field {
  position: relative;
  float: right;
}

.checkbox-label {
  display: inline-block;
  width: 35px;
  height: 15px;
  min-width: 30px;
  margin-top: 3px;
  border-radius: 15px;
  background-color: #ededed;
  -webkit-transition: all 150ms ease-out;
  transition: all 150ms ease-out;
}

.checkbox-handle {
  position: absolute;
  width: 21px;
  height: 21px;
  border-radius: 20px;
  background-color: #d6d6d6;
  -webkit-transition: all 150ms ease-out;
  transition: all 150ms ease-out;
}

.checkbox-handle.checked {
  background-color: #f50291;
  opacity: 1;
  -webkit-transform: translate(16px, 0px);
  -ms-transform: translate(16px, 0px);
  transform: translate(16px, 0px);
}

.checkbox-input {
  display: none;
}
.checkbox-handle{
    pointer-events:none;
}

我也做了一个codepen：https://codepen.io/anon/pen/VpOMbK。

你可以看到只有合适的人才有效。我无法找到原因，而且我一直在努力寻找它！

提前感谢您的帮助。

Answer 1

问题在于您for="checkbox2"

更改

<div class="checkbox-field w-checkbox w-clearfix">
  <div class="checkbox-handle"></div>
  <input class="checkbox-input w-checkbox-input" data-name="Checkbox2" id="checkbox2" name="checkbox2" type="checkbox">
  <label class="checkbox-label w-form-label" for="checkbox"></label>
                                                          ^missing a 2
</div>

到

<div class="checkbox-field w-checkbox w-clearfix">
  <div class="checkbox-handle"></div>
  <input class="checkbox-input w-checkbox-input" data-name="Checkbox2" id="checkbox2" name="checkbox2" type="checkbox">
  <label class="checkbox-label w-form-label" for="checkbox2"></label>
</div>

$('#checkbox').change(function() {
  if ($(this).is(':checked')) {
    $(this).prev('.checkbox-handle').addClass('checked');
    $(this).next('.checkbox-label').addClass('checked');
  } else {
    $(this).prev('.checkbox-handle').removeClass('checked');
    $(this).next('.checkbox-label').removeClass('checked');
  }
});

$('#checkbox2').change(function() {
  if ($(this).is(':checked')) {
    $(this).prev('.checkbox-handle').addClass('checked');
    $(this).next('.checkbox-label').addClass('checked');
  } else {
    $(this).prev('.checkbox-handle').removeClass('checked');
    $(this).next('.checkbox-label').removeClass('checked');
  }
});

.checkbox-field {
  position: relative;
  float: right;
}

.checkbox-label {
  display: inline-block;
  width: 35px;
  height: 15px;
  min-width: 30px;
  margin-top: 3px;
  border-radius: 15px;
  background-color: #ededed;
  -webkit-transition: all 150ms ease-out;
  transition: all 150ms ease-out;
}

.checkbox-handle {
  position: absolute;
  width: 21px;
  height: 21px;
  border-radius: 20px;
  background-color: #d6d6d6;
  -webkit-transition: all 150ms ease-out;
  transition: all 150ms ease-out;
}

.checkbox-handle.checked {
  background-color: #f50291;
  opacity: 1;
  -webkit-transform: translate(16px, 0px);
  -ms-transform: translate(16px, 0px);
  transform: translate(16px, 0px);
}

.checkbox-input {
  display: none;
}

.checkbox-handle {
  pointer-events: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="style.css" rel="stylesheet" type="text/css">

<div class="checkbox-field w-checkbox w-clearfix">
  <div class="checkbox-handle"></div>
  <input class="checkbox-input w-checkbox-input" data-name="Checkbox" id="checkbox" name="checkbox" type="checkbox">
  <label class="checkbox-label w-form-label" for="checkbox"></label>
</div>

<div class="checkbox-field w-checkbox w-clearfix">
  <div class="checkbox-handle"></div>
  <input class="checkbox-input w-checkbox-input" data-name="Checkbox2" id="checkbox2" name="checkbox2" type="checkbox">
  <label class="checkbox-label w-form-label" for="checkbox2"></label>
</div>