Trong jQuery, làm cách nào để chọn một phần tử theo thuộc tính tên của nó?

Tôi có 3 nút radio trong trang web của mình, như bên dưới:

<label for="theme-grey">
  <input type="radio" id="theme-grey" name="theme" value="grey" />Grey</label>
<label for="theme-pink">
  <input type="radio" id="theme-pink" name="theme" value="pink" />Pink</label>
<label for="theme-green">
  <input type="radio" id="theme-green" name="theme" value="green" />Green</label>

Trong jQuery, tôi muốn lấy giá trị của nút radio đã chọn khi bất kỳ một trong ba nút này được nhấp. Trong jQuery, chúng ta có các bộ chọn id (#) và class (.), Nhưng nếu tôi muốn tìm một nút radio theo tên của nó, như dưới đây thì sao?

$("<radiobutton name attribute>").click(function(){});

Xin vui lòng cho tôi biết làm thế nào để giải quyết vấn đề này.

Điều này nên làm điều đó, tất cả những điều này đều có trong tài liệu , trong đó có một ví dụ rất giống với điều này:

$("input[type='radio'][name='theme']").click(function() {
    var value = $(this).val();
});

Tôi cũng cần lưu ý rằng bạn có nhiều ID giống hệt nhau trong đoạn trích đó. Đây là HTML không hợp lệ. Sử dụng các lớp để nhóm các thành phần, không phải ID, vì chúng phải là duy nhất.

Để xác định nút radio nào được chọn, hãy thử điều này:

$('input:radio[name=theme]').click(function() {
  var val = $('input:radio[name=theme]:checked').val();
});

Sự kiện sẽ được bắt cho tất cả các nút radio trong nhóm và giá trị của nút đã chọn sẽ được đặt trong val.

Cập nhật: Sau khi đăng bài, tôi đã quyết định rằng câu trả lời của Paolo ở trên là tốt hơn, vì nó sử dụng một giao dịch DOM ít hơn. Tôi đang để câu trả lời này đứng vững vì nó chỉ ra cách lấy phần tử được chọn theo cách tương thích với nhiều trình duyệt.

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

cách khác

$('input:radio[name=theme]').filter(":checked").val()

Điều này làm việc tuyệt vời cho tôi. Ví dụ: bạn có hai nút radio có cùng "tên" và bạn chỉ muốn nhận giá trị của nút đã chọn. Bạn có thể thử cái này

$valueOfTheCheckedRadio = $('[name=radioName]:checked').val();

Đoạn mã sau được sử dụng để lấy giá trị nút radio đã chọn theo tên

jQuery("input:radio[name=theme]:checked").val();

Cảm ơn Ad Nam

Tôi đã tìm thấy câu hỏi này khi tôi đang nghiên cứu một lỗi sau khi tôi nâng cấp từ 1.7.2 của jQuery lên 1.8.2. Tôi đang thêm câu trả lời của mình vì đã có một thay đổi trong jQuery 1.8 và cao hơn là thay đổi cách trả lời câu hỏi này ngay bây giờ.

Với jQuery 1.8, họ đã loại bỏ các bộ chọn giả như: radio ,: hộp kiểm ,: văn bản.

Để làm như trên bây giờ chỉ cần thay thế :radiobằng [type=radio].

Vì vậy, câu trả lời của bạn bây giờ trở thành cho tất cả các phiên bản jQuery 1.8 trở lên:

$("input[type=radio][name=theme]").click(function() { 
    var value = $(this).val(); 
}); 

Bạn có thể đọc về thay đổi trên 1.8 readme và vé cụ thể cho thay đổi này cũng như hiểu lý do tại sao trên trang : bộ chọn radio trong phần Thông tin bổ sung.

Đối với bất cứ ai không muốn bao gồm một thư viện để làm một cái gì đó thực sự đơn giản:

document.querySelector('[name="theme"]:checked').value;

jsfiddle

Để biết tổng quan về hiệu suất của các câu trả lời hiện tại, hãy kiểm tra tại đây

Nếu bạn muốn biết giá trị của nút radio được chọn mặc định trước một sự kiện nhấp chuột, hãy thử điều này:

alert ($ ("đầu vào: radio: đã kiểm tra"). val ());

Bạn có thể sử dụng chức năng lọc nếu bạn có nhiều nhóm radio trên trang, như bên dưới

$('input[type=radio]').change(function(){
    var value = $(this).filter(':checked' ).val();
    alert(value);
});

Đây là url fiddle

http://jsfiddle.net/h6ye7/67/

<input type="radio" name="ans3" value="help"> 
<input type="radio" name="ans3" value="help1">
<input type="radio" name="ans3" value="help2">

<input type="radio" name="ans2" value="test"> 
<input type="radio" name="ans2" value="test1">
<input type="radio" name="ans2" value="test2">

<script type="text/javascript">
  var ans3 = jq("input[name='ans3']:checked").val()
  var ans2 = jq("input[name='ans2']:checked").val()
</script>

Nếu bạn muốn một giá trị đúng / sai, hãy sử dụng giá trị này:

  $("input:radio[name=theme]").is(":checked")

Một cái gì đó như thế này có thể?

$("input:radio[name=theme]").click(function() { 
 ...
}); 

Khi bạn nhấp vào bất kỳ nút radio nào, tôi tin rằng nó sẽ được chọn, vì vậy điều này sẽ được gọi cho nút radio đã chọn.

Tôi có nhiều nhóm nút radio trên cùng một trang, bạn cũng có thể thử điều này để nhận giá trị của nút radio:

$("input:radio[type=radio]").click(function() {
    var value = $(this).val();
    alert(value);
});

Chúc mừng!

cũng có thể sử dụng lớp CSS để xác định phạm vi các nút radio và sau đó sử dụng các mục sau để xác định giá trị

$('.radio_check:checked').val()

Điều này làm việc cho tôi ..

HTML:

<input type="radio" class="radioClass" name="radioName" value="1" />Test<br/>
<input type="radio" class="radioClass" name="radioName" value="2" />Practice<br/>
<input type="radio" class="radioClass" name="radioName" value="3" />Both<br/>

Câu hỏi:

    $ (". radioClass"). mỗi (hàm () {
        if ($ (này) .is (': đã kiểm tra'))
        cảnh báo ($ (này) .val ());
    });

Hy vọng nó giúp..

$('input:radio[name=theme]').bind(
  'click',
  function(){
    $(this).val();
});

Bạn có thể nhận thấy bằng cách sử dụng bộ chọn lớp để nhận giá trị của các ASP.NET RadioButtonđiều khiển luôn trống và đây là lý do.

Bạn tạo RadioButtonđiều khiển ASP.NETnhư dưới đây:

<asp:RadioButton runat="server" ID="rbSingle" GroupName="Type" CssClass="radios" Text="Single" />
<asp:RadioButton runat="server" ID="rbDouble" GroupName="Type" CssClass="radios" Text="Double" />
<asp:RadioButton runat="server" ID="rbTriple" GroupName="Type" CssClass="radios" Text="Triple" />

Và ASP.NETkết xuất lại HTML sau cho bạnRadioButton

<span class="radios"><input id="Content_rbSingle" type="radio" name="ctl00$Content$Type" value="rbSingle" /><label for="Content_rbSingle">Single</label></span>
<span class="radios"><input id="Content_rbDouble" type="radio" name="ctl00$Content$Type" value="rbDouble" /><label for="Content_rbDouble">Double</label></span>
<span class="radios"><input id="Content_rbTriple" type="radio" name="ctl00$Content$Type" value="rbTriple" /><label for="Content_rbTriple">Triple</label></span>

Vì ASP.NETchúng tôi không muốn sử dụng RadioButtontên hoặc id kiểm soát vì chúng có thể thay đổi vì bất kỳ lý do nào ngoài tầm tay của người dùng (thay đổi tên container, tên biểu mẫu, tên người dùng, ...) như bạn có thể thấy trong mã ở trên.

Cách khả thi duy nhất còn lại để nhận giá trị của việc RadioButtonsử dụng jQuery là sử dụng lớp css như được đề cập trong câu trả lời này cho một câu hỏi hoàn toàn không liên quan như sau

$('span.radios input:radio').click(function() {
    var value = $(this).val();
});