jQuery: làm cho các hộp kiểm hoạt động như nút radio?

Có cách nào để thực hiện các hộp kiểm hoạt động như nút radio không? Tôi cho rằng điều này có thể được thực hiện với jQuery?jQuery: làm cho các hộp kiểm hoạt động như nút radio?

<input type="checkbox" class="radio" value="1" name="fooby[1][]" /> 
<input type="checkbox" class="radio" value="1" name="fooby[1][]" /> 
<input type="checkbox" class="radio" value="1" name="fooby[1][]" /> 

<input type="checkbox" class="radio" value="1" name="fooby[2][]" /> 
<input type="checkbox" class="radio" value="1" name="fooby[2][]" /> 
<input type="checkbox" class="radio" value="1" name="fooby[2][]" />

Nếu một hộp được chọn, những người khác trong nhóm sẽ bỏ chọn.

Nguồn

2011-01-15 superUntitled

+18

Tại sao không sử dụng nút radio thực tế? Sử dụng các hộp kiểm như các nút radio sẽ gây nhầm lẫn cho người dùng của bạn. – BoltClock

Tôi có thể ăn mặc con chó của tôi như một con mèo, nhưng nó sẽ không thông minh hơn để có được một con mèo? – jondavidjohn

@Phrogz: Tôi có đủ nghiêm túc không? :/ – BoltClock

$("input:checkbox").click(function(){ 
    var group = "input:checkbox[name='"+$(this).attr("name")+"']"; 
    $(group).attr("checked",false); 
    $(this).attr("checked",true); 
});

Điều này sẽ làm điều đó, mặc dù tôi đồng ý điều này có thể là một ý tưởng tồi.

dụ Online: http://jsfiddle.net/m5EuS/1/

CẬP NHẬT thêm tách nhóm.

Nguồn

2011-01-15 04:12:25 amosrivera

Làm cho nó "input.radio:checkbox" và bạn đã có một thỏa thuận. –

công trình này, gần như, phần duy nhất không hoạt động trong ví dụ là thực tế là tên của các nhóm hộp kiểm khác nhau. Trong mã của bạn, tất cả các hộp kiểm trên trang bị ảnh hưởng, thay vì các hộp kiểm trong một tập hợp cụ thể. – superUntitled

không vì điều đó sẽ không hoạt động, nếu bạn nhận thấy tên, anh ta có 2 nhóm, bạn đã có nó hoạt động như một nhóm lớn – jondavidjohn

Có lẽ bạn muốn xem xét một cách tiếp cận khác. Tôi tin rằng bạn muốn tạo kiểu cho nút radio trông giống như một hộp kiểm. Nếu có, hãy xem: this google search

Và dưới đây là ví dụ đơn giản mà tôi mượn từ www.thecssninja.com.

Để đơn giản: bạn ẩn nút radio thực (xem đầu vào css [type = radio]) và bạn tạo nhãn cho nút radio tương ứng để hiển thị hộp kiểm tùy chỉnh (từ css sprite trong nền hình ảnh trong đầu vào [loại = radio] + nhãn) và chuyển sang một chữ khác trong nền khi nút radio ở trạng thái đã chọn. Chạy ví dụ ở đây: http://jsfiddle.net/jchandra/R5LEe/

<!DOCTYPE html> 
    <html> 
    <head> 
     <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
     <title> Custom CSS3 control facade</title>  
     <style type='text/css'> 
     label { 
      padding: 0 0 0 24px; 
     } 

     input[type=radio] { 
      padding:0; 
      margin:0; 
      width:16px; 
      height:16px; 
      position:absolute; 
      left:0; 
      opacity:0 
     } 

     input[type=radio] + label { 
      background:url(http://www.thecssninja.com/demo/css_custom-forms/gr_custom-inputs.png) 0 -1px no-repeat; 
      width:50px; 
      height:16px; 
     } 

     input[type=radio]:checked + label { 
      background-position:0 -81px; 
     } 
     </style>  
    </head> 
    <body> 
     Custom control images and concept from www.thecssninja.com<br/> 
     <br/> 
     <input type="radio" class="radio" value="1" name="fooby[1][]" id="r1" /><label for="r1"></label> 
     <input type="radio" class="radio" value="2" name="fooby[1][]" id="r2" /><label for="r2"></label> 
     <input type="radio" class="radio" value="3" name="fooby[1][]" id="r3" /><label for="r3"></label> 
     <br/> 
     <input type="radio" class="radio" value="1" name="fooby[2][]" id="r4" /><label for="r4"></label> 
     <input type="radio" class="radio" value="2" name="fooby[2][]" id="r5" /><label for="r5"></label> 
     <input type="radio" class="radio" value="3" name="fooby[2][]" id="r6" /><label for="r6"></label> 
    </body> 
</html>

Nguồn

2011-01-15 04:24:28

Cập nhật cho Jquery 1.9 - sử dụng .prop() thay vì .attr()

$("input:checkbox").click(function(){ 
    var group = "input:checkbox[name='"+$(this).prop("name")+"']"; 
    $(group).prop("checked",false); 
    $(this).prop("checked",true); 
});

Dưới đây là một ví dụ: http://jsfiddle.net/m5EuS/585/

Nguồn

2013-04-20 05:33:45 user2301396

Cảm ơn bạn đã nhập thông tin này! – kezi

Cảm ơn bạn đã cập nhật! – ncrocfer

ou ở đây u đi, tôi chỉ nhận thấy rằng trong khi thêm :) thx – stenly

về cơ bản là câu trả lời tương tự như @amosrivera nhưng tháo bỏ chọn của tất cả các hộp kiểm là cần thiết của nó. thay vì sử dụng .not()

$("input:checkbox").click(function(){ 
     var group = "input:checkbox[name='"+$(this).prop("name")+"']"; 
     $(group).not(this).prop("checked",false); 
    });

Nguồn

2014-02-10 17:30:24 Rob

này sẽ không hoạt động như nút radio, bạn cần phải đặt kiểm tra trên mỗi lần nhấp vào – stenly

Cảm ơn điều này đã giúp tôi ra để làm cho nó cũng không thể kiểm soát. Chấp thuận tốt đẹp với chức năng không. –

Tôi sẽ nhận xét nhưng không có đại diện. Sử dụng .change, không .click cho khả năng tiếp cận và vì vậy nó hoạt động với bàn phím, như vậy:

jQuery(".radio-check-box").change(function() { 
    var checked = jQuery(this).prop("checked"); 
    jQuery(".radio-check-box").attr("checked", false); 
    jQuery(this).prop("checked", checked); 
    });

Nguồn

2014-08-28 18:51:54 Davorama

Nếu bạn áp dụng lớp để hộp kiểm này, bạn có thể dễ dàng đạt được các chức năng của nút radio bằng đoạn mã sau đây:

$(".make_radio").click(function(){ 
    $(".make_radio").not(this).attr("checked",false); 
});

Nguồn

2014-10-16 10:19:14

Nếu bạn chọn "$ (" input: checkbox ")" sẽ chọn tất cả hộp kiểm để bạn có thể chỉ định nút radio khác bằng cách sử dụng tên của chúng.

$("[name='sname1']").click(function(){ 
    var group = "input:checkbox[name='"+$(this).attr("name")+"']"; 
    $(group).prop("checked",false);

Dưới Ví dụ sẽ giải thích

\t $("[name='sname1']").click(function(){ 
 
    var group = "input:checkbox[name='"+$(this).attr("name")+"']"; 
 
    $(group).prop("checked",false); 
 
    $(this).prop("checked",true); 
 
\t 
 
\t 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div style="border:1px solid"> 
 
<label><input type="checkbox" id="Titleblink_check" name="sname1">Blink</label> 
 
&nbsp;&nbsp;(OR)&nbsp;&nbsp; 
 
<label><input type="checkbox" id="Titleshine_check" name="sname1">Shine Text</label> 
 
<br> 
 
</div> 
 

 

 

 
<label><input type="checkbox" id="id1" >Diff Check box1</label> 
 
<br> 
 
<label><input type="checkbox" id="id2">Diff Check box2</label> 
 
<br> 
 
<label><input type="checkbox" id="id3">Diff Check box3</label> 
 
<br>

$ .prop (this) ("kiểm tra", true); });

Nguồn

2015-05-20 10:01:49

Tôi đã cập nhật tập lệnh Fiddle, jQuery bị thiếu. Bây giờ với prop và attr (sử dụng cả hai).

$('form').each(function() { // iterate forms 
    var $this = $(this); 
    $this.find('input:checkbox').click(function() { 
    var group = 'input:checkbox[name="' + $(this).attr('name') + '"]'; 
    $this.find(group).attr('checked', false).prop('checked', false); // also use prop, for real Property change 
    $(this).attr('checked', true).prop('checked', true); // also use prop, for real Property change 
    }); 
});

Fiddle

Nguồn

2016-05-27 20:37:17

Sử dụng sự kiện thay đổi của hộp kiểm và gán giá trị kiểm tra hộp kiểm hiện chọn:

\t $("input[type=checkbox]").change(function() 
 
\t { 
 
\t \t $("input[type=checkbox]").prop('checked',false); 
 
\t \t $(this).prop('checked',true); 
 
\t });

.checkBoxb{ 
 
    float:left; 
 
    clear:both; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label class="checkBoxb"><input type="checkbox" /> CheckBox1</label> 
 
<label class="checkBoxb"><input type="checkbox" /> CheckBox2</label> 
 
<label class="checkBoxb"><input type="checkbox" /> CheckBox3</label> 
 
<label class="checkBoxb"><input type="checkbox" /> CheckBox4</label>

Nguồn

2016-09-28 12:37:43

Cập nhật các kịch bản (thông qua câu trả lời từ Tomislav), do đó bạn cũng có thể bỏ chọn TẤT CẢ các hộp kiểm. Chỉ cần thêm một .không (điều này) và loại bỏ dòng nơi hộp kiểm hiện tại được chọn.

$('form').each(function() { // iterate forms 
    var $this = $(this); 
    $this.find('input:checkbox').click(function() { 
    var group = 'input:checkbox[name="' + $(this).attr('name') + '"]'; 
    $this.find(group).not(this).attr('checked', false).prop('checked', false); // also use prop, for real Property change 
    }); 
});

http://jsfiddle.net/kya0639w/

Nguồn

2016-09-30 06:04:01 David

Các giải pháp đưa ra không quan tâm về tình trạng ban đầu, đó là khác biệt so với các hành vi nút radio. Ngoài ra, nó cũng kích hoạt sự kiện thay đổi khi nhấp vào một đầu vào đã được kiểm tra.

var $elements = $('input:checkbox'); 
 

 
// Allow only one input to be selected 
 
$elements.filter(':checked:not(:last)').prop('checked', false); 
 

 
// Get selected input 
 
var selected = $elements.filter(':checked')[0] || {}; 
 

 
// Handle event 
 
$(document).on('click', 'input:checkbox', function(e) { 
 
    if (e.currentTarget === selected) { 
 
    e.preventDefault(); 
 
    } else { 
 
    selected.checked = false; 
 
    selected = e.currentTarget; 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<label><input type="checkbox" value="0" /> test 0</label> 
 
<label><input type="checkbox" value="1" checked /> test 1</label> 
 
<label><input type="checkbox" value="2" checked /> test 2</label> 
 
<label><input type="checkbox" value="3" /> test 3</label>

Tôi cũng đồng ý rằng làm như đó là một ý tưởng tồi, nhưng nếu bạn có một cái tên khác nhau cho mỗi đầu vào (và không thể thay đổi chúng), không có lựa chọn nào khác ..

Nguồn

2017-03-30 00:20:12 gtournie

jQuery: làm cho các hộp kiểm hoạt động như nút radio?

Trả lời

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