2013-06-15 66 views
23

Vấn đề là công việc giải pháp này chỉ trong firefoxLàm thế nào để bỏ chọn kiểm tra nút radio

$(':radio').on("change", function(event){ 
    $(this).prop('checked', true); 
}); 

$(':radio').on("click", function(event){ 
    $(this).prop('checked', false); 
}); 

Trong chrome, nó sẽ không cho phép bạn chọn bất cứ điều gì http://jsfiddle.net/wuAWn/

OFC, tôi có thể sử dụng biến và viết một cái gì đó giống như

var val = -1; 
$(':radio').on("click", function(){ 
    if($(this).val()==val) 
    {$(this).prop('checked', false); 
    val = -1; 
    } 
    else val = $(this).val(); 
}); 

Nhưng tôi sẽ có vài nhóm nút radio trên trang và nội dung html của tôi được tải qua ajax, vì vậy tôi muốn wrtite 1 chức năng cho tất cả chúng, thay vì xác định các biến cho mỗi nhóm nút radio và viết cùng chức năng cho mọi nhóm nút radio.

Chỉnh sửa: cảm ơn sự giúp đỡ của bạn với hộp kiểm, nhưng đối với hộp kiểm để hoạt động như một nhóm nút radio, bạn cần phải viết javascrip adittional sẽ bỏ chọn tất cả các hộp kiểm khác có cùng tên onclick, tôi đã có nút radio css và dễ dàng hơn đối với tôi chỉ cần thêm lớp giống như hộp kiểm và trông giống như hộp kiểm, tôi sử dụng thư viện thống nhất cho giao diện tùy chỉnh, dù sao đây là giải pháp lạ của tôi http://jsfiddle.net/wuAWn/9/

+0

Những gì còn thiếu trong câu hỏi này là những gì bạn đang cố gắng để đạt được .. Vô hiệu hóa các hộp kiểm radio? sau đó bạn có thể sử dụng thuộc tính disabled = "disabled" .. – arnorhs

+0

Không i wat để vô hiệu hóa chúng, tôi muốn tạo nhóm radiobutton, cho phép bạn bỏ chọn đã được kiểm tra. – ccd580ac6753941c6f84fe2e19f229

+0

@Especially Tôi tò mò muốn biết tại sao điều này được đánh dấu là trùng lặp? Người này đang yêu cầu cách bỏ chọn nút radio đã chọn khi được nhấp. Đây là một con thú hoàn toàn khác mà chỉ đơn giản là unckecking một hộp kiểm. Xem fiddle này: http://jsfiddle.net/x48cx/ – Pytry

Trả lời

12

Nút radio có nghĩa là tùy chọn bắt buộc ... bạn muốn chúng được bỏ chọn, sử dụng hộp kiểm, không cần phải phức tạp và cho phép người dùng bỏ chọn nút radio; loại bỏ các JQuery cho phép bạn chọn từ một trong số họ

+1

+1, viết jquery dễ dàng hơn để giới hạn một tập các hộp kiểm đến mức tối đa của một số đếm (1 trong kịch bản của bạn) – Mikhail

+0

Ofc.Tôi có thể làm điều đó, btu tôi đã css cho các nút radio và cho các hộp kiểm để có thể hoạt động như các nút radio, tôi cần phải viết javascript quá, altho nó không khó, nhưng vẫn còn, tôi chỉ muốn biết nếu điều này có thể không có biến hay không. – ccd580ac6753941c6f84fe2e19f229

+4

kiểm tra tại đây tính năng này hoạt động trên tất cả các trình duyệt. [http://jsfiddle.net/f4vXj/2/](http://jsfiddle.net/f4vXj/2/) – banny

3

thử

chức năng này duy nhất cho tất cả các đài phát thanh có lớp "radio nút"

làm việc trong chrome và FF

http://jsfiddle.net/wuAWn/5/

$('.radio-button').on("click", function(event){ 
    $('.radio-button').prop('checked', false); 
    $(this).prop('checked', true); 
}); 
+2

Nó sẽ không cho phép bạn bỏ chọn đã được chọn. – ccd580ac6753941c6f84fe2e19f229

+0

Đây sẽ là một ý tưởng tồi nếu bạn có nhiều nhóm nút radio trên cùng một trang. – olleicua

5

Bạn có thể xem xét thêm nút radio bổ sung cho từng nút nhóm có nhãn 'không' hoặc tương tự. Điều này có thể tạo trải nghiệm người dùng nhất quán mà không làm phức tạp quá trình phát triển.

+0

Cảm ơn, nhưng trong một số trường hợp, nó sẽ trông kỳ lạ, như chọn giới tính nam, nữ, không ai – ccd580ac6753941c6f84fe2e19f229

+1

Nó không phải nói 'không'. Nếu bạn muốn cho phép người dùng của mình, ví dụ như không chỉ định giới tính, thì bạn có thể có nút radio có gắn nhãn 'không xác định'. Hành vi bạn đang tìm kiếm có nhấp vào nút radio đã chọn khiến nó không được chọn? – olleicua

+1

Một hộp chọn cũng có thể là một tùy chọn. Mặc định là 'không xác định' – Hashbrown

0

thử

http://jsfiddle.net/wuAWn/6/

$('.radio-button').on("click", function (event) { 
     var this_input = $(this); 
     if (this_input.attr('checked1') == '11') { 

      this_input.attr('checked1', '11') 

     } 
     else { 
      this_input.attr('checked1', '22') 
         } 
     $('.radio-button').prop('checked', false); 
     if (this_input.attr('checked1') == '11') { 
      this_input.prop('checked', false); 
      this_input.attr('checked1', '22') 
     } 
     else { 
      this_input.prop('checked', true); 
      this_input.attr('checked1', '11') 
     } 

    }); 
+0

@ user2486415 thử này .. nó cũng bỏ chọn –

+0

Cảm ơn, nó là một giải pháp tốt đẹp, nhưng có vấn đề, cố gắng bấm 1,2,3 và sau đó một lần nữa 1,2,3 – ccd580ac6753941c6f84fe2e19f229

+1

@ user2486415 bây giờ tôi đã cập nhật nó thử lại http : //jsfiddle.net/wuAWn/10/ –

34

Kịch bản này này đơn giản cho phép bạn bỏ chọn một nút radio đã kiểm tra. Hoạt động trên tất cả các trình duyệt đã bật javascript.

<html> 
    <!-- html from your link: [http://jsfiddle.net/wuAWn/][1] --> 
    <body> 
     <input type='radio' class='radio-button' name='re'> 
     <input type='radio' class='radio-button' name='re'> 
     <input type='radio' class='radio-button' name='re'> 
    </body> 

    <script type="text/javascript"> 
     var allRadios = document.getElementsByName('re'); 
     var booRadio; 
     var x = 0; 
     for(x = 0; x < allRadios.length; x++){ 

      allRadios[x].onclick = function() { 
       if(booRadio == this){ 
        this.checked = false; 
        booRadio = null; 
       }else{ 
        booRadio = this; 
       } 
      }; 
     } 
    </script> 
</html> 

http://jsfiddle.net/6Mkde/

+1

Ví dụ này yêu cầu bạn nhấp vào nút radio hai lần nếu trang được tải với đầu vào đã được kiểm tra. –

Các vấn đề liên quan