javascript - 使用 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;
}

我也做了一个代码笔: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>