获取单选框中的标签名称

Question

>我有一个html组件

<div class='clearfix gbo' id='11tonne_truck' data-capaciteit='11 tonne truck'>
    <div style='float: left;' class='bb'><img class='tic' src='<?php echo base_url(' assets/images/map_icons/truck_3.svg '); ?>'></div>
    <div style='float: left;' class='economy'>10 Tonne Truck</div>
    <div style='float: right;' class='infuhr'>
        <ion-icon class='ic' name='information-circle-outline' data-toggle='tooltip' data-placement='right' title='lorem ipsum'></ion-icon>
    </div>
    <div style='float: right;' class='bb transport_amount' id='11tonne_truck_amount'>Ksh 250 <br/> <span class='pt' id='11tonne_truck_pt'>Pickup by 00:00 pm</span></div>
    <div class='typesd'>
        <label class='radio-inline'>
        <input type='radio' name='optradio' value='any' checked>Any</label>
        <label class='radio-inline'>
        <input type='radio' name='optradio' value='closed'>Closed</label>
        <label class='radio-inline'>
        <input type='radio' name='optradio' value='open'>Open</label>
     </div>
</div>

我想得到包含单选按钮的标签。我试过这个

$('input:radio[name="optradio"]').change(function() {
    var selectedText = $('label').closest('.radio-inline').text();
    var selectedCapacity = $('.gbo').closest('#11tonne_truck').attr('data-capaciteit');
    alert(selectedText);    
    alert(selectedCapacity);
});

这就是结果 http://jsfiddle.net/ay8z749k/10/

我只得到了整套单选框，但我只对单击的单选按钮的值感兴趣。如何获得正确的selectedText值

Answer 1

使用 this 关键字获取处理程序中更改的输入。若要获取父<label>标记，请使用closest()方法。因此，以下代码将显示所选单选按钮的文本。

$('input:radio[name="optradio"]').change(function() {
  var $input=$(this);
  console.log('The value is ' + $input.val());
  console.log('The label text is ' + $input.closest('label').text());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='clearfix gbo' id='11tonne_truck' data-capaciteit='11 tonne truck'>
  <div style='float: left;' class='bb'><img class='tic' src='<?php echo base_url(' assets/images/map_icons/truck_3.svg '); ?>'></div>
  <div style='float: left;' class='economy'>10 Tonne Truck</div>
  <div style='float: right;' class='infuhr'>
    <ion-icon class='ic' name='information-circle-outline' data-toggle='tooltip' data-placement='right' title='lorem ipsum'></ion-icon>
  </div>
  <div style='float: right;' class='bb transport_amount' id='11tonne_truck_amount'>Ksh 250
    <br/> <span class='pt' id='11tonne_truck_pt'>Pickup by 00:00 pm</span></div>
  <div class='typesd'>
    <label class='radio-inline'>
      <input type='radio' name='optradio' value='any' checked>Any
    </label>
    <label class='radio-inline'>
      <input type='radio' name='optradio' value='closed'>Closed
    </label>
    <label class='radio-inline'>
      <input type='radio' name='optradio' value='open'>Open
    </label>
  </div>
</div>

另一种方法是将侦听器附加到<label>。该技巧使用事件冒泡。因此，在下面的代码片段中，this将引用<label>，其中包括更改的输入。

$('label').change(function() {
  console.log($(this).text());
});