jQuery - Bỏ chọn các hộp kiểm hoạt động giống như các nút radio

Question

Tôi có mã jQuery sau đây để làm cho các hộp kiểm của tôi hoạt động giống như các nút radio, vì vậy chỉ có thể kiểm tra 1 trong 3 lần tại một thời điểm.

<script type="text/javascript" language="javascript"> 
$(document).ready(function() { 
    $("#testing input:checkbox").change(function(){ 
     var checkname = $(this).attr("name"); 
     $("input:checkbox[name='" + checkname + "']").removeAttr("checked"); 
     this.checked = true; 
    }); 
}); 
</script> 

Các hộp kiểm được đặt ra như sau:

<input type="checkbox" id="testing" name="testing" value="B"> 
<input type="checkbox" id="testing" name="testing" value="I"> 
<input type="checkbox" id="testing" name="testing" value="A"> 

này hoạt động một cách chính xác làm thế nào tôi muốn nó để làm việc, không phải là một vấn đề, ngoại trừ một lần tôi nhấp vào một trong 3, tôi không thể unclick nó do đó không ai trong số họ được kiểm tra, đây là những gì tôi muốn xảy ra, do đó, cùng với việc chỉ có thể nhấp vào một tại một thời điểm, im có thể bỏ chọn chúng hoàn toàn.

Bất kỳ trợ giúp sẽ là lớn :)

Answer 1

Chỉ chạy mã mà unchecks những người khác nếu this đã checked.

Ví dụ:http://jsfiddle.net/CX5Th/1/

$("#testing input:checkbox").change(function() { 
    if(this.checked) { 
     var checkname = $(this).attr("name"); 
     $("input:checkbox[name='" + checkname + "']").removeAttr("checked"); 
     this.checked = true; 
    } 
}); 

---

EDIT: Dưới đây là một phiên bản có thể ngăn chặn hộp mới kiểm tra từ được đánh dấu khi bạn chọn các hộp có cùng tên. Nó sử dụng not()^(docs) để loại trừ hộp kiểm hiện tại.

Ví dụ:http://jsfiddle.net/CX5Th/2/

$("#testing input:checkbox").change(function() { 
    if (this.checked) { 
     var checkname = $(this).attr("name"); 
     $("input:checkbox[name='" + checkname + "']").not(this).removeAttr("checked"); 
    } 
}); 

Answer 2

$("input:checkbox").click(function(){ 
    var ischecked = $(this).attr('checked'); 
    $('input:checkbox').attr('checked',false); 
    $(this).attr('checked', ischecked); 
}); 

http://jsfiddle.net/yDPhv/

Answer 3

Ít Mã! :-)

var boxes = $("input:checkbox").click(function(){ 
    boxes.not(this).attr('checked', false); 
}); 

http://jsfiddle.net/YqSXA/1/