如果选中单选按钮，如何获取单选按钮的文本？

Question

我的JavaScript代码是：

$('input:radio[class=radio]').click(function(e){
  var txt = $(e.target).text();
  console.log(txt);
});

演示： https : //jsfiddle.net/oscar11/m7by6zcw/9/

我怎样才能解决这个问题？

Answer 1

文本不是输入类型单选按钮的有效属性。

如果检查内容，您将看到文本被渲染为输入元素的同级。 您可以遍历到父标签元素，然后在其中添加文本。

同样，这里也不需要使用eqaul选择器属性[class=radio] ），因为其中没有元素具有class radio：

 $('input:radio').click(function(e){
    var txt = $(this).parent().text();
    console.log(txt);
 });

工作演示

Answer 2

在事件处理程序中，可以使用Node.nextSibling，然后可以访问其nodeValue ：

 $('input:radio[class=radio]').on('click', function () { var txt = this.nextSibling.nodeValue.trim(); console.log(txt); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-md-4"> <ul class="list-unstyled"> <li><strong>England</strong></li> <li> <div class="checkbox"> <label> <input type="radio" name="england" class="radio"> Chelsea </label> </div> </li> <li> <div class="checkbox"> <label> <input type="radio" name="england" class="radio"> Mu </label> </div> </li> <li> <div class="checkbox"> <label> <input type="radio" name="england" class="radio"> Arsenal </label> </div> </li> </ul> </div> <div class="col-md-4"> <ul class="list-unstyled"> <li><strong>Spain</strong></li> <li> <div class="checkbox"> <label> <input type="radio" name="spain" class="radio"> Madrid </label> </div> </li> <li> <div class="checkbox"> <label> <input type="radio" name="spain" class="radio"> Barcelona </label> </div> </li> <li> <div class="checkbox"> <label> <input type="radio" name="spain" class="radio"> Atletico </label> </div> </li> </ul> </div> 

Answer 3

您可以通过选择input的父标签来实现

$('input:radio').click(function() {
        alert($(this).parent().text());
});

您没有单选按钮上带有单选按钮的课程。 因此，它也不会触发click事件。 您将需要删除它。

在这里更新了小提琴

Answer 4

参见下面的代码片段

 $('input:radio[class=radio]').click(function(e){ var txt = e.target.labels["0"].innerText; console.log(txt); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-md-4"> <ul class="list-unstyled"> <li><strong>England</strong></li> <li> <div class="checkbox"> <label> <input type="radio" name="england" class="radio"> Chelsea </label> </div> </li> <li> <div class="checkbox"> <label> <input type="radio" name="england" class="radio"> Mu </label> </div> </li> <li> <div class="checkbox"> <label> <input type="radio" name="england" class="radio"> Arsenal </label> </div> </li> </ul> </div> <div class="col-md-4"> <ul class="list-unstyled"> <li><strong>Spain</strong></li> <li> <div class="checkbox"> <label> <input type="radio" name="spain" class="radio"> Madrid </label> </div> </li> <li> <div class="checkbox"> <label> <input type="radio" name="spain" class="radio"> Barcelona </label> </div> </li> <li> <div class="checkbox"> <label> <input type="radio" name="spain" class="radio"> Atletico </label> </div> </li> </ul> </div> 

Answer 5

我只是尝试您的代码，但我发现您的选择器我错了，请尝试以下一种： jsfiddle

$('input:radio').click(function(e){
        var txt = $(e.target).parent().text();
        alert(txt);
});

Answer 6

 $('input:radio').click(function(e){ var txt = $(e.target).parent().text(); alert(txt); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="frm"> <div class="col-md-4"> <ul class="list-unstyled"> <li><strong>England</strong></li> <li> <div class="checkbox"> <label> <input type="radio" name="england"> Chelsea </label> </div> </li> <li> <div class="checkbox"> <label> <input type="radio" name="england"> Mu </label> </div> </li> <li> <div class="checkbox"> <label> <input type="radio" name="england"> Arsenal </label> </div> </li> </ul> </div> <div class="col-md-4"> <ul class="list-unstyled"> <li><strong>Spain</strong></li> <li> <div class="checkbox"> <label> <input type="radio" name="spain"> Madrid </label> </div> </li> <li> <div class="checkbox"> <label> <input type="radio" name="spain"> Barcelona </label> </div> </li> <li> <div class="checkbox"> <label> <input type="radio" name="spain"> Atletico </label> </div> </li> </ul> </div> </form> 

Answer 7

请尝试以下示例，

的HTML

<div class="col-md-4">
    <ul class="list-unstyled">
        <li><strong>England</strong></li>
        <li>
            <div class="checkbox">
                <label>
                    <input type="radio" name="england" value="Chelsea"> Chelsea
                </label>
            </div>
        </li>
        <li>
            <div class="checkbox">
                <label>
                    <input type="radio" name="england" value="Mu"> Mu
                </label>
            </div>
        </li>
        <li>
            <div class="checkbox">
                <label>
                    <input type="radio" name="england" value="Arsenal"> Arsenal
                </label>
            </div>
        </li>
    </ul>
</div>
<div class="col-md-4">
    <ul class="list-unstyled">
        <li><strong>Spain</strong></li>
        <li>
            <div class="checkbox">
                <label>
                    <input type="radio" name="spain" value="Madrid"> Madrid
                </label>
            </div>
        </li>
        <li>
            <div class="checkbox">
                <label>
                    <input type="radio" name="spain" value="Barcelona"> Barcelona
                </label>
            </div>
        </li>
        <li>
            <div class="checkbox">
                <label>
                    <input type="radio" name="spain" value="Atletico"> Atletico
                </label>
            </div>
        </li>
    </ul>
</div>

JQUERY

<script type="text/javascript">
    $("input[type=radio]").on("click",function(e){
        alert($(this).val());
    })
</script>

Answer 8

我将应用一个简单的解决方案，即在您的单选按钮中添加“值”：

例如：

<label>
    <input type="radio" name="england" class="radio" value="Mu"> Mu
</label>

允许您优雅地访问值：

$(e.target).val();