jquery - 单独选中自定义复选框

Question

大家好，提前感谢您的帮助!

我正在尝试为联系表单创建一些自定义复选框。默认复选框不可见，位于自定义复选框内，在示例中您将了解我在寻找什么。这个想法是，一旦您单击该复选框，就会显示一个自定义样式，表示该字段已被选中，如果您再次单击同一字段，该样式就会消失。现在，我无法仅检查选定的复选框，因此无法设置样式，而是所有其他字段也被选中或取消选择。另一个问题是第一个字段中的复选框默认处于选中状态，而我需要取消选中它们。

$('.checkbox input').on( 'click', function() {
    if( $(this).is(':checked') ){
        $('.checkbox').addClass('checked');
    } else {
        $('.checkbox').removeClass('checked');
    }
});

.checkbox{
	width: 125px;
	background-color: #fff;
	border: 2px solid #1AC4F8;
	display: inline-block;
	margin: 10px 0;
    font-size: 14px;
    color: gray;
    text-align: center;
    cursor: pointer;
    -webkit-transition: color 0.8s, background-color 0.8s;
	transition: color 0.8s, background-color 0.8s;
}

.checkbox:hover{
	color: white;
	background-color: #1AC4F8;
}

.checkbox input{
	opacity: 0;
	position: absolute;
	z-index: -1
}

.checkRow{
	text-align: center;	
}

.checked{
	color: white;
	background-color: #1AC4F8;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="checkRow">
                    <label class="checkbox">
                        <input type="checkbox" name="service" value="SEO">SEO
                    </label>
                    <label class="checkbox">
                        <input type="checkbox" name="service" value="SEM">SEM
                    </label>
                    <label class="checkbox">
                        <input type="checkbox" name="service" value="Emailing">Emailing
                    </label>
                    <label class="checkbox">
                        <input type="checkbox" name="service" value="Social networks">Social networks
                    </label>
                    <label class="checkbox">
                        <input type="checkbox" name="service" value="Web design">Web design
                    </label>
                </div>

我希望一切都清楚了:)

Answer 1

您遇到的主要问题是您在此处切换所有复选框...

$('.checkbox').addClass('checked');

这里

$('.checkbox').removeClass('checked');

您应该以这种方式引用当前正在(取消)检查的元素...

$(this).parent().addClass('checked');
$(this).parent().removeClass('checked');

$('.checkbox input').on('click', function() {
  if ($(this).is(':checked')) {
    $(this).parent().addClass('checked');
  } else {
    $(this).parent().removeClass('checked');
  }
});

.checkbox {
  width: 125px;
  background-color: #fff;
  border: 2px solid #1AC4F8;
  display: inline-block;
  margin: 10px 0;
  font-size: 14px;
  color: gray;
  text-align: center;
  cursor: pointer;
  -webkit-transition: color 0.8s, background-color 0.8s;
  transition: color 0.8s, background-color 0.8s;
}
.checkbox:hover {
  color: white;
  background-color: #1AC4F8;
}
.checkbox input {
  opacity: 0;
  position: absolute;
  z-index: -1
}
.checkRow {
  text-align: center;
}
.checked {
  color: white;
  background-color: #1AC4F8;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="checkRow">
  <label class="checkbox">
    <input type="checkbox" name="service" value="SEO">SEO
  </label>
  <label class="checkbox">
    <input type="checkbox" name="service" value="SEM">SEM
  </label>
  <label class="checkbox">
    <input type="checkbox" name="service" value="Emailing">Emailing
  </label>
  <label class="checkbox">
    <input type="checkbox" name="service" value="Social networks">Social networks
  </label>
  <label class="checkbox">
    <input type="checkbox" name="service" value="Web design">Web design
  </label>
</div>