Jquery Css无法突出显示输入类型按钮标签文本onclick单选按钮

时间：2017-11-08 19:52:49

标签： jquery html css forms

我想知道如何在点击单选按钮上标记输入类型单选按钮标签文本。在SO的一些答案的帮助下，它处理标签点击，但是当我点击单选按钮时，我无法标记突出显示。

＆＃13;
＆＃13; 
$('label').click(function() {
  $('label').removeClass('orangeBackground');
  $(this).addClass('orangeBackground');
});
＆＃13; 
.orangeBackground {
  color: #CE5A0B;
  font-weight: bold;
}
＆＃13; 
<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">&times;</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>
＆＃13;
＆＃13;
＆＃13;

Iamge 1 .. First snippet when i clicked its respective label

图片2 ...... When i clicked radio button previous label won't unmarked with new one

任何帮助都将非常感激。 感谢

3 个答案:

答案 0 :(得分：2)

您只是将点击应用于标签，而输入复选框位于其外部并且不会触发点击，因此只需将其放在标签内，如下所示：

＆＃13;
＆＃13; 
$('label').click(function() {
  $('label').removeClass('orangeBackground');
  $(this).addClass('orangeBackground');
});
＆＃13; 
.orangeBackground {
  color: #CE5A0B;
  font-weight: bold;
}
＆＃13; 
<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">&times;</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">
             <label for="rad1"> <input type="radio" name="reason-closing" value="1" id="rad1"> Rate Mismatch</label>
            </div>
            <div class="col-md-12 col-xs-12 cell-no-padding">
             <label for="rad2"> <input type="radio" name="reason-closing" value="2" id="rad2"> Program Cancelled / Differed</label>
            </div>
            <div class="col-md-12 col-xs-12 cell-no-padding">
              <label for="rad3"> <input type="radio" name="reason-closing" value="3" id="rad3">Vehicle Unavailable</label>
            </div>
            <div class="col-md-12 col-xs-12 cell-no-padding">
              <label for="rad4"><input type="radio" name="reason-closing" value="4" id="rad4"> Listing Fulfilled By Party</label>
            </div>
            <div class="col-md-12 col-xs-12 cell-no-padding">
              <label for="rad5"> <input type="radio" name="reason-closing" value="5" id="rad5">Payment Terms Mismatch</label>
            </div>
            <div class="col-md-12 col-xs-12 cell-no-padding">
              <label for="rad6"><input type="radio" name="reason-closing" value="6" id="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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

试试这个解决方案

Object.assign()

https://jsfiddle.net/cxerg55f/

答案 2 :(得分：-1)

这应该这样做，使用一个类（这里我称之为“radioBtns”）作为捕获点击的输入/标签。

100.99
$(".radioBtns").click(function() {
  $('label').removeClass('orangeBackground');
  $(this).parent().children("label").addClass('orangeBackground');
});
.orangeBackground {
    color: #CE5A0B;
    font-weight: bold;
}

相关问题
最新问题