jQuery获取radio选中后的文字

HTML 示例如下：

---------------html----------------
<input type="radio" name="appointmentRadio" value="1"><span>aa</span>
<input type="radio" name="appointmentRadio" value="2"><span>bb</span>

------jquery
var str= $(":radio:checked + span").text();
alert(str);

//获取radio文字

var vnodename = $("input[name='sex']:checked")[0].nextSibling.nodeName.toLowerCase();

console.log(vnodename);

if (vnodename == "#text") {
    var ridvalue = $("input[name='sex']:checked")[0].nextSibling.nodeValue;
    if (ridvalue.replace(/\s+/g, "") == '') {

        console.log($("input[name='sex']:checked").next("label").text());
    }
    else {
        console.log(ridvalue);
    }

}

else   {

    console.log($("input[name='sex']:checked").next(vnodename).text());
}

 

//获取指定id的radio的文本
        function get(id) {
            var dom = $('#'+id);
          var nm= dom[0].nextSibling.nodeName.toLowerCase();
          console.log(nm);
          console.log(dom.next("label").text());

          
        }

 

//获取指定id的check或radio的文本
function GetCheckOrRadiotext(id) {
    var dom = $('#' + id);
    var vnodename = dom[0].nextSibling.nodeName.toLowerCase();

    if (vnodename == "#text") {

        var ridvalue = dom[0].nextSibling.nodeValue;

        if (ridvalue.replace(/\s+/g, "") == '') {

            return dom.next("label").text()

        }
        else {

            return ridvalue;
        }

    }

    else {
        return dom.next(vnodename).text();
    }

}

 

---------------html----------------

<label class="label"><input type="radio" name="appointmentRadio" value="1"/>aa</label>
<label class="label"><input type="radio" name="appointmentRadio" value="2"/>bb</label>

------jquery

 var str=$("input[name='appointmentRadio']:checked")[0].nextSibling.nodeValue;
alert(str);

 

引用：

https://blog.csdn.net/zhanyouwen/article/details/51393216

<input type="radio" id="male" name="sex" value="1" />男  <input type="radio" id="female" name="sex" value="2" />女  

在这里直接给出 jQuery 获取 radio 选中后的文本的方法，如下：

 

$("input[name='sex']:checked")[0].nextSibling.nodeValue;  

方法将 jQuery 对象转换为 DOM 对象后，再使用原生的 javascript 方法获取文本。在我回复朋友前，他通过在 radio 后添加 span 标记来解决这个问题：

 

<input type="radio" id="male" name="sex" value="1" /><span>男</span>  

接来下获取时使用 next() 选择器，如下：

 

$("input[name='sex']:checked").next("span").text();

问题看似到这里就结束了，其实不然，这并不是好的用户体验。好的做法应该为 radio 添加 for 标记，这样在点击 radio 文本"男"或"女"的时候也能选中 radio，这比让用户点击一个小圆圈容易多了。所以最好的 HTML 标记应该如下：

 

<input type="radio" id="male" name="sex" value="1" />  <label for="male">男</label>  <input type="radio" id="female" name="sex" value="2" />  <label for="female">女</label>  

最后获取 radio 选中后的文本我相信你已经会了，如下：

 

$("input[name='sex']:checked").next("label").text();

这样使用 jQuery 成功获取了 radio 选中后的文本，这里主要是指最后一个方法。