在jQuery中，當它們都具有相同的名稱時，如何獲得單選按鈕的值？

Question

這是我的代碼：

<table>
   <tr>
      <td>Sales Promotion</td>
      <td><input type="radio" name="q12_3" value="1">1</td>
      <td><input type="radio" name="q12_3" value="2">2</td>
      <td><input type="radio" name="q12_3" value="3">3</td>
      <td><input type="radio" name="q12_3" value="4">4</td>
      <td><input type="radio" name="q12_3" value="5">5</td>
   </tr>
</table>
<button id="submit">submit</button>

這是JS：

$(function(){
    $("#submit").click(function(){      
        alert($('input[name=q12_3]').val());
    });
 });

這是JSFIDDLE ！ 每次我點擊按鈕它都會返回1.為什么？ 誰能幫我？

Answer 1

在您的代碼中，jQuery只查找名為q12_3的輸入的第一個實例，在這種情況下，其值為1 。 您想要一個名為q12_3的輸入:checked 。

 $("#submit").click(() => { const val = $('input[name=q12_3]:checked').val(); alert(val); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <td>Sales Promotion</td> <td><input type="radio" name="q12_3" value="1">1</td> <td><input type="radio" name="q12_3" value="2">2</td> <td><input type="radio" name="q12_3" value="3">3</td> <td><input type="radio" name="q12_3" value="4">4</td> <td><input type="radio" name="q12_3" value="5">5</td> </tr> </table> <button id="submit">submit</button> 

注意，以上代碼是不一樣的使用.is(":checked") jQuery的is()函數返回一個布爾值（true或false）而不是（a）元素。

---

因為這個答案一直受到很多關注，我還會包含一個vanilla JavaScript代碼段。

 document.querySelector("#submit").addEventListener("click", () => { const val = document.querySelector("input[name=q12_3]:checked").value; alert(val); }); 

 <table> <tr> <td>Sales Promotion</td> <td><input type="radio" name="q12_3" value="1">1</td> <td><input type="radio" name="q12_3" value="2">2</td> <td><input type="radio" name="q12_3" value="3">3</td> <td><input type="radio" name="q12_3" value="4">4</td> <td><input type="radio" name="q12_3" value="5">5</td> </tr> </table> <button id="submit">submit</button> 

Answer 2

在你的選擇器中，你還應該指定你想要檢查的radiobutton：

$(function(){
    $("#submit").click(function(){      
        alert($('input[name=q12_3]:checked').val());
    });
 });

Answer 3

您可能想要更改選擇器：

$('input[name=q12_3]:checked').val()

Answer 4

還有另一種方式。 試試下面的代碼

$(document).ready(function(){

      $("input[name='gender']").on("click", function() {
            alert($(this).val());
        });
});

Answer 5

$('input:radio[name=q12_3]:checked').val();

Answer 6

演示 ： https ： //jsfiddle.net/ipsjolly/xygr065w/

$(function(){
    $("#submit").click(function(){      
        alert($('input:radio:checked').val());
    });
 });

Answer 7

使用這個腳本

$('input[name=q12_3]').is(":checked");