我想更改未选中复选框的标签颜色。到目前为止,我的 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" ));
});
});
谢谢!
最佳答案
$(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>
关于javascript - 使用 jQuery 更改未选中复选框文本的颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50381562/