Question

我有多个这种单选按钮：

<li class="row time-slot text-align">
    <label>
        <input type="radio" name="timeslot">TEXT
    </label>\
</li>

以下jQuery：

$('input[name="timeslot"]').on('change', function(){
    if ($(this).is(':checked'))
        alert($(this).text());
});

但是在检查列表中的一个单选按钮时没有任何警报。我在.click()之前尝试使用.on('change')（无效）。

Answer 1

您可以使用nextSibling

的nodeValue属性

$('input[name="timeslot"]').on('change', function() {
  if (this.checked)
    alert(this.nextSibling.nodeValue);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="row time-slot text-align">
    <label>
      <input type="radio" name="timeslot">TEXT
    </label>
  </li>
  <li class="row time-slot text-align">
    <label>
      <input type="radio" name="timeslot">TEXT 2
    </label>
  </li>
  <ul>

Answer 2

试试这个：你正在阅读单选按钮的文本，但不是那里，而是下一个和标签标签。所以，阅读父文本。此外，您无需检查:checked，因为将始终选中已更改的单选按钮

＆＃13;

$(function(){
  $('input[name="timeslot"]').on('change', function(){
    //if ($(this).is(':checked')) -- not required this check
        alert($(this).parent().text());
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="row time-slot text-align">
    <label>
        <input type="radio" name="timeslot">TEXT1
    </label>\
    <label>
        <input type="radio" name="timeslot">TEXT2
    </label>\
  <label>
        <input type="radio" name="timeslot">TEXT3
    </label>\
  
  <label>
        <input type="radio" name="timeslot">TEXT4
    </label>\
</li>

＆＃13;

如果选中警报单选按钮文本

2 个答案: