Question

我尝试了各种各样的方法，使用stackoverflow和其他人的答案，它变得非常令人沮丧，因为它应该有效。点击时尝试使标签更改颜色以选中复选框。以下是我的代码;

$("input[type=checkbox]").change(function() {
  $(this).parent().toggleClass("color_change");
});
})

.style_check {
  padding: 20px;
  background: yellow;
}
.color_change {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="style_check">
  <input type="checkbox" name="roles" value="1" />
  <span class="p_check">Block User</span>
</label>

我能做些什么才能让它发挥作用？

Answer 1

使用您发布的代码 - 我刚删除了})，您的示例正常运行。

$("input[type=checkbox]").change(function() {
  $(this).parent().toggleClass("color_change");
});

.style_check {
  padding: 20px;
  background: yellow;
}
.color_change {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="style_check">
  <input type="checkbox" name="roles" value="1" />
  <span class="p_check">Block User</span>
</label>

Answer 2

如果您删除额外的})并且如果您使用checkbox＆{39}和label之间正确关系的正确HTML，则应该有效，查看下面的示例。

希望这有帮助。

＆＃13;

$("input[type=checkbox]").change(function () {
  $(this).parent().toggleClass("color_change");
});

＆＃13;

.color_change{
    color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <input type="checkbox" /> 
  <label>Checkbox 1</label>
</div>
<div>
  <input type="checkbox" /> 
  <label>Checkbox 1</label>
</div>
<div>
  <input type="checkbox" /> 
  <label>Checkbox 1</label>
</div>
<div>
  <input type="checkbox" /> 
  <label>Checkbox 1</label>
</div>

＆＃13;

您的案例摘要

＆＃13;

$("input[type=checkbox]").change(function () {
  $(this).parent().toggleClass("color_change");
});

＆＃13;

.style_check {padding:20px; background:yellow;}
.color_change {background:red;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label class="style_check">
  <input type="checkbox" name="roles" value="1"  />
  <span class="p_check">Block User</span>
</label>

<label class="style_check">
  <input type="checkbox" name="roles" value="1"  />
  <span class="p_check">Block User</span>
</label>

<label class="style_check">
  <input type="checkbox" name="roles" value="1"  />
  <span class="p_check">Block User</span>
</label>

<label class="style_check">
  <input type="checkbox" name="roles" value="1"  />
  <span class="p_check">Block User</span>
</label>

＆＃13;

Answer 3

您的javascript上有一些额外的})。所以可能是语法问题。我在jsfiddle上设置了工作示例：

HTML：

<form >
  <input type="checkbox" name="vehicle" value="Bike" > I have a bike<br>
</form>

JS：

$("input[type=checkbox]").change(function () {
  $(this).parent().toggleClass("color_change");
});

CSS：

.color_change {
  color: red;
}

切换不工作复选框

3 个答案: