如果選中單選按鈕，如何獲取單選按鈕的文本？

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();