Question

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

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

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

Answer 2

我刚换了：

$('.checkbox').addClass('checked');与$(this).parent().addClass('checked');
$('.checkbox').removeClass('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>

单独检查自定义复选框

2 个答案: