Tìm hiểu xem nút radio có được kiểm tra bằng JQuery không?

Tôi có thể đặt nút radio để kiểm tra tốt, nhưng điều tôi muốn làm là thiết lập một loại 'người nghe' kích hoạt khi một nút radio nhất định được chọn.

Lấy ví dụ mã sau:

$("#element").click(function()
{ 
    $('#radio_button').attr("checked", "checked");
});

nó thêm một thuộc tính được kiểm tra và tất cả đều tốt, nhưng tôi sẽ làm thế nào để thêm cảnh báo. Ví dụ, cửa sổ bật lên khi nút radio được kiểm tra mà không có sự trợ giúp của chức năng nhấp?

$('#element').click(function() {
   if($('#radio_button').is(':checked')) { alert("it's checked"); }
});

Nếu bạn có một nhóm các nút radio chia sẻ cùng một thuộc tính tên và khi gửi hoặc một số sự kiện bạn muốn kiểm tra xem một trong các nút radio này có được kiểm tra hay không, bạn có thể thực hiện việc này đơn giản bằng mã sau:

$(document).ready(function(){
  $('#submit_button').click(function() {
    if (!$("input[name='name']:checked").val()) {
       alert('Nothing is checked!');
        return false;
    }
    else {
      alert('One of the radio buttons is checked!');
    }
  });
});

Nguồn

Tham khảo API jQuery

Vì giải pháp của Parag đã gây ra lỗi cho tôi, đây là giải pháp của tôi (kết hợp giữa David Hedlund và Parag):

if (!$("input[name='name']").is(':checked')) {
   alert('Nothing is checked!');
}
else {
   alert('One of the radio buttons is checked!');
}

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

Bạn sẽ phải liên kết sự kiện nhấp của hộp kiểm, vì sự kiện thay đổi không hoạt động trong IE.

$('#radio_button').click(function(){
    // if ($(this).is(':checked')) alert('is checked'); 
    alert('check-checky-check was changed');
});

Bây giờ khi bạn thay đổi trạng thái theo chương trình, bạn cũng phải kích hoạt sự kiện này:

$('#radio_button').attr("checked", "checked");
$('#radio_button').click();

// Kiểm tra qua lớp

if($("input:radio[class='className']").is(":checked")) {
     //write your code         
}

// Kiểm tra tên

if($("input:radio[name='Name']").is(":checked")) {
         //write your code         
}

// Kiểm tra thông qua dữ liệu

if($("input:radio[data-name='value']").is(":checked")) {
         //write your code         
}

Một cách khác là sử dụng (jQuery> = 1.6) :prop

$("input[type=radio]").click(function () {
    if($(this).prop("checked")) { alert("checked!"); }
});

Giải pháp sẽ đơn giản, vì bạn chỉ cần 'người nghe' khi kiểm tra một nút radio nhất định. Làm đi :-

if($('#yourRadioButtonId').is(':checked')){ 
// Do your listener's stuff here. 
}

Nếu bạn không muốn có chức năng nhấp, hãy sử dụng chức năng thay đổi Jquery

$('#radio_button :checked').live('change',function(){
alert('Something is checked.');
});

Đây sẽ là câu trả lời mà bạn đang tìm kiếm. nếu bạn đang sử dụng phiên bản Jquery trên 1.9.1, hãy thử sử dụng vì chức năng trực tiếp không được dùng nữa.

... Cảm ơn các bạn ... tất cả những gì tôi cần là 'giá trị' của nút radio được kiểm tra trong đó mỗi nút radio trong bộ có một id khác nhau ...

 var user_cat = $("input[name='user_cat']:checked").val();

làm việc cho tôi ...

Làm việc với tất cả các loại Nút radio và Trình duyệt

if($('#radio_button_id')[0].checked) {
   alert("radiobutton checked")
}
else{
   alert("not checked");
}

Làm việc tại đây

Nút radio được tạo động Kiểm tra giá trị radio

$("input:radio[name=radiobuttonname:checked").val();

Khi thay đổi nút Radio động

$('input[name^="radioname"]').change(function () {if (this.value == 2) { }else{}});

$ ('. radio-button-class-name'). là ('đã kiểm tra') không hoạt động với tôi, nhưng mã tiếp theo hoạt động tốt:

    if(typeof $('.radio-button-class-name:checked').val() !== 'undefined'){
     // radio button is checked
    }

thử cái này

    if($('input[name="radiobutton"]:checked').length == 0) {
        alert("Radio buttons are not checked");
    }

Thử cái này:

alert($('#radiobutton')[0].checked)

jQuery vẫn phổ biến, nhưng nếu bạn muốn không có phụ thuộc, hãy xem bên dưới. Chức năng ngắn & rõ ràng để tìm hiểu xem nút radio có được kiểm tra trên ES-2015 không:

function getValueFromRadioButton( name ){
  return [...document.getElementsByName(name)]
         .reduce( (rez, btn) => (btn.checked ? btn.value : rez), null)
}

console.log( getValueFromRadioButton('payment') );

<div>  
  <input type="radio" name="payment" value="offline">
  <input type="radio" name="payment" value="online">
  <input type="radio" name="payment" value="part" checked>
  <input type="radio" name="payment" value="free">
</div>

$("#radio_1").prop("checked", true);

Đối với các phiên bản jQuery trước 1.6, hãy sử dụng:

$("#radio_1").attr('checked', 'checked');