【发布时间】：2017-11-08 19:52:48
【问题描述】：
我想知道如何在单击单选按钮上标记输入类型单选按钮标签文本。在 SO 中的一些答案的帮助下，它正在处理标签单击，但是当我单击单选按钮时，我无法标记突出显示。
$('label').click(function() {
$('label').removeClass('orangeBackground');
$(this).addClass('orangeBackground');
});.orangeBackground {
color: #CE5A0B;
font-weight: bold;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal fade listing-id" id="closeListingModal" role="dialog">
<div class="modal-dialog closelistingmodal-dialog">
<!-- Modal content-->
<div class="modal-content closelistingmodal-content">
<form class="closelisting-form form-horizontal" onsubmit="return false" role="form" data-listing-id="" action="">
<input type="hidden" name="listing_id">
<input type="hidden" name="listing_weight">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="closelistingmodal-body modal-top-padding">
<div class="col-sm-12 ">
<div class="col-md-12 col-xs-12 cell-no-padding">
<input type="radio" name="reason-closing" value="1" id="rad1"><label for="rad1"> Rate Mismatch</label>
</div>
<div class="col-md-12 col-xs-12 cell-no-padding">
<input type="radio" name="reason-closing" value="2" id="rad2"><label for="rad2"> Program Cancelled / Differed</label>
</div>
<div class="col-md-12 col-xs-12 cell-no-padding">
<input type="radio" name="reason-closing" value="3" id="rad3"><label for="rad3"> Vehicle Unavailable</label>
</div>
<div class="col-md-12 col-xs-12 cell-no-padding">
<input type="radio" name="reason-closing" value="4" id="rad4"><label for="rad4"> Listing Fulfilled By Party</label>
</div>
<div class="col-md-12 col-xs-12 cell-no-padding">
<input type="radio" name="reason-closing" value="5" id="rad5"><label for="rad5"> Payment Terms Mismatch</label>
</div>
<div class="col-md-12 col-xs-12 cell-no-padding">
<input type="radio" name="reason-closing" value="6" id="rad6"><label for="rad6"> Wrong Post</label>
</div>
</div>
<div class="form-group col-sm-12">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 ">
<label>Rate PMT:</label>
<input class=" form-control row-margin input-pmtftl-amount" type="text" id="closelistinginput-value" name="listing_pmt" value="" placeholder="Rate In PMT (₹)" / min="0">
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 no-of-trucks">
<label>Weight (MT):</label>
<input class="no-of-trucks form-control " type="text" name="listing_weight_mt" value="" id="noOfTrucks" min="1" />
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 ">
<label>Rate FTL:</label>
<input class=" form-control input-pmtftl-amount" type="text" id="closelistingftl-input" name="listing_ftl" value="" placeholder="Rate In FTL (₹)" / min="0">
</div>
</div>
<div class="form-group col-sm-12">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 hidden-lg hidden-md hidden-sm">
<textarea type="text" class=" form-control row-margin" name="listing_notes" placeholder="Notes" /></textarea>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 hidden-xs">
<textarea type="text" class=" form-control row-margin" name="listing_notes" placeholder="Notes" /></textarea>
</div>
</div>
</div>
<div class="modal-footer ">
<button class="v2-button closing-submit-btn" name="closelisting-submit">Submit</button>
</div>
</form>
</div>
</div>
</div>任何帮助将不胜感激。 谢谢
【问题讨论】：
-
已转换为 sn-p，我没有发现任何问题。
-
@SergChernata 检查这个 sn-p 。 jsfiddle.net/pw8Ld6cs 如果您点击任何 abel，它会以突出显示的颜色进行检查，但如果您点击任何单选按钮，其各自的标签将不会改变。
-
标签什么时候变回黑色？
-
@ErikPhilips 当我检查一个新按钮时。
-
@TanmoySarkar 是同名的单选按钮吗？