Javascript 使用jQuery处理多个复选框

我目前有一个基本的HTML页面，里面有两个复选框

我有一个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>

我也做了一个密码笔：

你可以看到只有正确的一个在工作。我不知道为什么，我一直在努力寻找它

---

提前感谢您的帮助。

问题在于您的

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>

.checkbox字段{
位置：相对位置；
浮动：对；
}
.复选框标签{
显示：内联块；
宽度：35px；
高度：15px；
最小宽度：30px；
利润上限：3倍；
边界半径：15px；
背景色：#ededed；
-webkit过渡：所有150毫秒的缓变；
过渡：所有150毫秒都放松；
}
.复选框句柄{
位置：绝对位置；
宽度：21px；
高度：21px；
边界半径：20px；
背景色：#D6；
-webkit过渡：所有150毫秒的缓变；
过渡：所有150毫秒都放松；
}
.checkbox-handle.checked{
背景色：#f50291；
不透明度：1；
-webkit转换：翻译（16px，0px）；
-ms变换：平移（16px，0px）；
转换：转换（16px，0px）；
}
.复选框输入{
显示：无；
}
.复选框句柄{
指针事件：无；
}

---

问题在于您的

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>

.checkbox字段{
位置：相对位置；
浮动：对；
}
.复选框标签{
显示：内联块；
宽度：35px；
高度：15px；
最小宽度：30px；
利润上限：3倍；
边界半径：15px；
背景色：#ededed；
-webkit过渡：所有150毫秒的缓变；
过渡：所有150毫秒都放松；
}
.复选框句柄{
位置：绝对位置；
宽度：21px；
高度：21px；
边界半径：20px；
背景色：#D6；
-webkit过渡：所有150毫秒的缓变；
过渡：所有150毫秒都放松；
}
.checkbox-handle.checked{
背景色：#f50291；
不透明度：1；
-webkit转换：翻译（16px，0px）；
-ms变换：平移（16px，0px）；
转换：转换（16px，0px）；
}
.复选框输入{
显示：无；
}
.复选框句柄{
指针事件：无；
}

data name=“Checbox”打字错误？复选框…数据名称=“Checbox”打字错误？复选框…你在第78行忘了一个{，要试试吗it@Nathanael更正了代码片段，希望对您有所帮助you@Nathanael很高兴帮你，你忘了78号线的电话，我试试it@Nathanael更正了代码片段，希望对您有所帮助you@Nathanael很乐意帮忙

<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>