Làm thế nào tôi có thể chuyển đổi radiobutton

Question

nói đây là HTML của tôi:

<input type="radio" name="rad" id="Radio0" checked="checked" /> 
<input type="radio" name="rad" id="Radio1" /> 
<input type="radio" name="rad" id="Radio2" /> 
<input type="radio" name="rad" id="Radio4" /> 
<input type="radio" name="rad" id="Radio3" /> 

Như bạn có thể thấy nút radio 1 sẽ được kiểm tra. Tôi cần nút radio để hoạt động như chuyển đổi. Ví dụ: Nếu tôi lại nhấp vào radio0, tất cả các nút radio sẽ không được chọn.

Làm cách nào để đạt được điều đó?

Cập nhật: Tôi không muốn thêm bất kỳ nút nào. Ví dụ: Tôi có thể thêm một nút và đặt thuộc tính đã chọn cho tất cả các nút radio là sai. Tuy nhiên, tôi không muốn điều đó. Tôi chỉ muốn mẫu của tôi bao gồm 4 nút radio này.

Cập nhật: Vì hầu hết mọi người không hiểu những gì tôi muốn, hãy để tôi cố gắng lặp lại - Tôi muốn nút radio hoạt động ở chế độ bật tắt. Tôi đã đặt cùng tên cho tất cả các nút radio vì thế nó là một nhóm. Bây giờ tôi muốn các radiobuttons để chuyển đổi chính nó. Ví dụ. nếu tôi bấm vào radio0, nó sẽ được bỏ chọn nếu nó được kiểm tra và kiểm tra nếu nó không được kiểm tra.

Answer 1

Sự cố bạn sẽ thấy là ngay khi nút radio được nhấp, trạng thái của nó được thay đổi trước khi bạn có thể kiểm tra. Những gì tôi đề nghị là thêm một thuộc tính tùy chỉnh để theo dõi trạng thái trước đó của mỗi đài phát thanh như vậy:

$(function(){ 
    $('input[name="rad"]').click(function(){ 
     var $radio = $(this); 

     // if this was previously checked 
     if ($radio.data('waschecked') == true) 
     { 
      $radio.prop('checked', false); 
      $radio.data('waschecked', false); 
     } 
     else 
      $radio.data('waschecked', true); 

     // remove was checked from other radios 
     $radio.siblings('input[name="rad"]').data('waschecked', false); 
    }); 
}); 

Bạn cũng sẽ cần phải thêm thuộc tính này để đánh dấu phát thanh kiểm tra ban đầu

<input type="radio" name="rad" id="Radio0" checked="checked" data-waschecked="true" /> 

Xem bản demo tại đây: http://jsfiddle.net/GoranMottram/VGPhD/2/

Answer 2

Khi bạn đặt tên cho 2 hoặc nhiều nút radio giống nhau, chúng sẽ tự động trở thành một nhóm. Trong nhóm đó chỉ có một nút radio có thể được kiểm tra. Bạn đã đạt được điều này.

Answer 3

Tôi sử dụng onClick() như sau cho radio tùy chỉnh của tôi:

$(function(){ 
    // if selected already, deselect 
    if ($(this).hasClass('selected') { 
    $(this).prop('checked', false); 
    $(this).removeClass('selected'); 
    } 
    // else select 
    else { 
    $(this).prop('checked', true); 
    $(this).addClass('selected'); 
    } 
    // deselect sibling inputs 
    $(this).siblings('input').prop('checked', false); 
    $(this).siblings('input').removeClass('selected'); 
}