使用 jQuery 更改未选中的复选框文本的颜色

Question

我想更改未选中复选框的标签颜色。到目前为止，我有jQuery代码，只允许选中一个复选框。有没有办法在选择/选中另一个选项时将未选中的复选框标签文本更改为不同的颜色？这是我的 HTML：

<label><input class="oneBox" type="checkbox" >Wednesday June 6th</label>
<label><input class="oneBox" type="checkbox" >Friday June 8th</label>

这是只选中一个框的jQuery：

$(document).ready(function(){
$('.oneBox').on('change', function() {
$('.oneBox').not(this).prop('checked', false);
$('#result').html($(this).data( "id" ));
if($(this).is(":checked"))
$('#result').html($(this).data( "id" ));
});
});

谢谢！

Answer 1

$(document).ready(function(){
$('label').addClass('default');
$('.oneBox').on('change', function() {
$('.oneBox').not(this).parents('label').removeClass("checked").addClass('oneBox');
// $('.oneBox').attr('class', 'oneBox');
$('.oneBox').not(this).prop('checked', false);
$(this).parents('label').removeClass("oneBox").addClass("checked");
if($(this).is(":checked"))
$('#result').html($(this).data( "id" ));

});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.default {
color: blue;
}
.checked {
color: red;
}
</style>
<label>
<input class="oneBox" type="checkbox" data-id="Wednesday" >Wednesday June 6th</label>
<label ><input class="oneBox" type="checkbox" data-id="Friday" >Friday June 8th</label>
<div id="result"></div>

Answer 2

您需要做的就是将.parent()设置为您想要的颜色。这可以通过使用.css()来完成，如$('.oneBox').not(this).parent().css('color', 'red')。请注意，如果更改选择，在这种情况下，第一个选择将保持红色。为了防止这种情况，您还需要告诉所选元素使用$(this).parent().css('color', 'inherit')inherit颜色。

这可以从下面看出：

$(document).ready(function() {
$('.oneBox').on('change', function() {
$('.oneBox').not(this).prop('checked', false);
//$('#result').html($(this).data("id"));
if ($(this).is(":checked")) {
//$('#result').html($(this).data("id"));
$('.oneBox').not(this).parent().css('color', 'red');
$(this).parent().css('color', 'inherit');
}
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input class="oneBox" type="checkbox">Wednesday June 6th</label>
<label><input class="oneBox" type="checkbox">Friday June 8th</label>