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

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

如果检查内容，您将看到文本呈现为输入元素的兄弟。您可以遍历父标签元素，然后在其中获取文本。

此处也不需要使用属性eqaul选择器（[class=radio]），因为其中没有元素具有类无线电：

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

<强> Working Demo

Answer 2

在您的事件处理程序中，您可以使用Node.nextSibling而不是访问其nodeValue：

＆＃13;

git rebase -i master

＆＃13;

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

＆＃13;

Answer 3

您可以通过选择输入的父标记

来实现

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

单选按钮上没有收音机的课程。所以它也不会触发点击事件。您需要将其删除。

更新了小提琴here

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 6

尝试以下示例，

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 7

我会应用一个简单的解决方案，即添加＆＃34;值＆＃34;在您的单选按钮内：

例如：

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

允许您优雅地访问该值：

$(e.target).val();

Answer 8

我只是尝试你的代码，我发现你的选择器我错了，请尝试这个： jsfiddle

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

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

8 个答案: