Question

我正在尝试返回“已选中”单选按钮的文本。 HTML结构由模板生成，并且呈现如下：

<input type="radio" name="whatever" value="Y" checked="checked" >Yes</input>
<input type="radio" name="whatever" value="N" >No</input>
<input type="radio" name="whatever"value="NA" >Not Applicable</input>

我能够得到如此值：

collection.find("input[type='radio']").each(function() {
  var checked = $(this).find(':checked').val();
});

我希望能够使用.text（）或.html（）而不是.val（），但似乎都不起作用。如何获得var checked =“是”？

Answer 1

您可以使用nextSibling返回输入旁边的文本节点，并返回textContent以返回文本。另外，input不能包含文字，也不会有结束标记。

＆＃13;

var text = $('input:radio:checked')[0].nextSibling.textContent;
console.log(text)

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="whatever" value="Y" checked="checked" >Yes
<input type="radio" name="whatever" value="N" >No
<input type="radio" name="whatever" value="NA" >Not Applicable

＆＃13;

Answer 2

您的HTML无效。 input只有一个短标记，因此它不希望在开始和结束标记之间有文本节点。您应该使用label作为文字：

＆＃13;

$('.collection').find("input[type='radio']").each(function() {
  var checked = $(this).find(':checked').val();
  var text = $(this).parent('label').text();
  console.log(text);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="collection">
  <label>
    <input type="radio" name="whatever" value="Y" checked="checked" />Yes
  </label>
  <label>
    <input type="radio" name="whatever" value="N" />No
  </label>
  <label>
    <input type="radio" name="whatever" value="NA" />Not Applicable
  </label>
</div>

＆＃13;

Answer 3

您可以使用解决方案https://jsfiddle.net/w6kqak6w/1/

＆＃13;

$("input[type='radio']").each(function() {
  var checked = $("input[type='radio']:checked")[0].nextSibling.textContent;
  console.log(checked);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="whatever" value="Y" checked="checked" />Yes
<input type="radio" name="whatever" value="N" />No
<input type="radio" name="whatever"value="NA" />Not Applicable

＆＃13;

Answer 4

输入字段没有直接文本属性，因此请使用label或span：

$("input[type='radio']:checked").each(function() {
  var checked = $(this).find(':checked').val();
  var text = $(this).next('label').text();
  console.log(text);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <input type="radio" name="whatever" value="Y" checked="checked" /><label>Yes</label>
  <input type="radio" name="whatever" value="N" /><label>No</label>
  <input type="radio" name="whatever" value="NA" /><label>Not Applicable</label>

返回已选中单选按钮的文本

4 个答案: