Làm cách nào để kiểm tra/bỏ chọn nút radio khi nhấp?

Question

Tôi muốn có thể bỏ chọn một nút radio bằng cách nhấp vào nút đó.

Vì vậy, nếu một nút radio không được chọn, tôi muốn kiểm tra nó, nếu nó được chọn, tôi muốn bỏ chọn nó.

này không hoạt động:

$('input[type=radio]:checked').click(function(){ 
    $(this).attr('checked', false); 
}); 

Tôi không thể kiểm tra một nút radio bây giờ.

Answer 1

Đây là không để thay thế một hộp kiểm, nó cho phép một nhóm radio để quay trở lại trạng thái không được chọn. Điều này là khó khăn vì việc lựa chọn radio không hoạt động như một sự kiện bình thường.

Trình duyệt xử lý các nút radio bên ngoài chuỗi sự kiện bình thường. Vì vậy, một trình xử lý nhấp chuột trên một nút vô tuyến với event.preventDefault() hoặc event.stopPropagation() sẽ KHÔNG ngăn không cho nút radio được kiểm tra. Các .removeAttr ('kiểm tra') phải được thực hiện trong một setTimeout để cho phép sự kiện kết thúc, và trình duyệt để kiểm tra các radiobutton (một lần nữa), và sau đó setTimeout sẽ cháy.

Điều này cũng xử lý chính xác thời điểm người dùng khởi động ứng dụng được giữ lại nhưng rời khỏi nút radio trước khi di chuột.

//$ = jQuery; 
$(':radio').mousedown(function(e){ 
    var $self = $(this); 
    if($self.is(':checked')){ 
    var uncheck = function(){ 
     setTimeout(function(){$self.removeAttr('checked');},0); 
    }; 
    var unbind = function(){ 
     $self.unbind('mouseup',up); 
    }; 
    var up = function(){ 
     uncheck(); 
     unbind(); 
    }; 
    $self.bind('mouseup',up); 
    $self.one('mouseout', unbind); 
    } 
}); 

Tôi hy vọng điều này sẽ giúp

Answer 2

Nếu chỉ có một nút radio bạn cần sử dụng hộp kiểm.

Không có ý nghĩa khi có một nút radio mà chúng hoạt động với nhóm.

có thể bạn đang tìm kiếm kiểm soát hộp kiểm.

Answer 3

thử điều này:

$('input[type=radio]').click(function(){ 
    if (this.previous) { 
     this.checked = false; 
    } 
    this.previous = this.checked; 
}); 

Answer 4

Đây là giải pháp thực tế ...

var check; 

$('input[type="radio"]').hover(function() { 
    check = $(this).is(':checked'); 
}); 

$('input[type="radio"]').click(function() { 
    check = !check; 
    $(this).attr("checked", check); 
}); 

Hãy thử nó, nó làm việc cho tôi!

Answer 5

var checked = {}; 
    $('.desectable-radio').each(function (index) { 
     checked[index] = this.checked; 
     $(this).click(function() { 
      if (checked[index]) 
       this.checked = false; 
      for (var i in checked) { 
       checked[i] = false; 
      } 
      checked[index] = this.checked; 
     }); 
    }); 

Answer 6

Tìm thấy một nơi nào đó trong khi tìm kiếm một giải pháp, làm như sự đơn giản của nó ...

var checkedradio; 
function docheck(thisradio) { 
    if (checkedradio == thisradio) { 
     thisradio.checked = false; 
     checkedradio = null; 
    } 
    else {checkedradio = thisradio;} 
} 

Sử dụng với:

<input type='radio' onclick='docheck(this);'> 

Nó dường như đòi hỏi một nhấp chuột kép để bỏ chọn khi bạn có nhiều nhóm radio trong một biểu mẫu, nhưng điều này có thể được giải quyết bằng cách có chức năng cho mỗi nhóm tôi giả sử ...

Answer 7

UX tốt hơn là có tùy chọn rõ ràng "Chọn không" được chọn mặc định và không cho phép người dùng bỏ chọn bất kỳ nút radio nào.

(List item 9 trong nngroup này (Neilsen) Bài chi tiết:

http://www.nngroup.com/articles/checkboxes-vs-radio-buttons/

Answer 8

Dưới đây là một kịch bản siêu nhẹ bạn có thể thêm vào một trang thông qua các cửa sổ giao diện điều khiển cho phép bạn bỏ chọn một nút radio bằng cách giữ xuống Ctrl khi nhấn nó với con chuột.

document.addEventListener('click', function(e){ 
    if (e.ctrlKey == true && 
     e.target.tagName == 'INPUT' && 
     e.target.type == "radio" && 
     e.target.checked == true) { 
     e.target.checked = false; 
    } 
}); 

Vì nó không dựa trên jQuery, bạn có thể dễ dàng thêm nó vào bất kỳ trang nào để tạm thời cho phép de lựa chọn.
Để biết thêm thông tin, bạn có thể đọc một bài viết tôi vừa viết trên How To Deselect A Radio Button.

Answer 9

Câu trả lời được chấp nhận không hoạt động trên thiết bị di động. Nó dựa trên setTimeout và bindings có liên quan đến các sự kiện chuột mà không cháy trên máy tính bảng/thiết bị di động.
Giải pháp của tôi là theo dõi trạng thái đã chọn theo cách thủ công bằng cách sử dụng trình xử lý sự kiện "nhấp" và trạng thái lớp tùy chỉnh.

1. xử lý sự kiện click vào các yếu tố đầu vào đài phát thanh
2. kiểm tra nếu các lớp "chọn" tồn tại trên các yếu tố nhấp
3. nếu có, (có nghĩa là nó đã được nhấp vào trước), loại bỏ các lớp và bỏ chọn phần tử, trả lại
4. nếu không, xóa lớp học khỏi tất cả các phần tử có cùng tên và thêm nó vào phần tử được nhấp.

Không cần phải ngăn chặn hành vi mặc định. Đây là mã trong Jquery:

$("input:radio").on("click",function (e) { 
    var inp=$(this); //cache the selector 
    if (inp.is(".theone")) { //see if it has the selected class 
     inp.prop("checked",false).removeClass("theone"); 
     return; 
    } 
    $("input:radio[name='"+inp.prop("name")+"'].theone").removeClass("theone"); 
    inp.addClass("theone"); 
}); 

http://jsfiddle.net/bhzako65/

Answer 10

Tôi biết câu hỏi này là cũ, nhưng tôi chỉ tình cờ gặp vấn đề này và quyết định để có một đi bản thân mình và không muốn sử dụng một nút modifier như ctrl.

Xem fiddle tại http://jsfiddle.net/ArktekniK/yhbw469f/ Đối Toggling một nút radio bằng cách nhấp vào nút radio tự

$('input[type=radio]').on('mousedown', function(e){ 
    var wasChecked = $(this).prop('checked'); 
    this.turnOff = wasChecked; 
    $(this).prop('checked', !wasChecked); 
}); 

$('input[type=radio]').on('click', function(e){ 
    $(this).prop('checked', !this.turnOff); 
    this['turning-off'] = !this.turnOff; 
}); 

Đối Toggling một nút radio bằng cách nhấp vào nút nhãn hoặc radio tự

$('label:has(input[type=radio])').on('mousedown', function(e){ 
    var radio = $(this).find('input[type=radio]'); 
    var wasChecked = radio.prop('checked'); 
    radio[0].turnOff = wasChecked; 
    radio.prop('checked', !wasChecked); 
}); 

$('label:has(input[type=radio])').on('click', function(e){ 
    var radio = $(this).find('input[type=radio]'); 
    radio.prop('checked', !radio[0].turnOff); 
    radio[0]['turning-off'] = !radio[0].turnOff; 
}); 

Answer 11

Như HexInteractive đã đề cập, nút radio được xử lý bên ngoài chuỗi sự kiện bình thường. Vì vậy, sau ví dụ đánh giá trạng thái nút theo tên lớp, không phải theo thuộc tính.

var $self; 

$('input[type=radio]').on('click', function() { 
    $self = $(this); 
    if ($self.hasClass('is-checked')) { 
    $self.prop('checked', false).removeClass('is-checked'); 
    } else { 
    $self.addClass('is-checked'); 
    } 
}); 

Answer 12

Cần một giải pháp cho vấn đề này, tôi định cư trên thay thế nút radio đang hoạt động với một nút 'hủy' biểu tượng, như thế này http://fontawesome.io/icon/ban/

Nhấp vào biểu tượng này bỏ chọn nút radio hoạt động, sau đó xuất hiện trở lại , có hiệu quả đặt lại nhóm nút radio. Biểu tượng hủy cũng bị xóa khỏi DOM.

Cách khác, người dùng có thể nhấp vào một nút radio khác trong nhóm, hoạt động như bình thường ngoài nút hủy, sau đó được "di chuyển" để thay thế nút radio hoạt động mới.

Điều này giữ biểu tượng hủy ở vị trí trực quan (tức là người dùng nhấp lần cuối) và an toàn hơn giả sử người dùng biết nhấp lại vào nút radio hiện đang hoạt động để hủy kích hoạt nhóm.

Trường hợp xấu nhất nếu bạn có danh sách nút radio dài, người dùng chỉ cần nhấp vào bất kỳ nút nào trong số hai lần để xóa nhóm.