jQuery: zaznacz pola wyboru zachowywać się jak przyciski radiowe?

Czy istnieje sposób, aby pola wyboru zachowywały się jak przyciski opcji? Zakładam, że można to zrobić za pomocą jQuery?jQuery: zaznacz pola wyboru zachowywać się jak przyciski radiowe?

<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][]" />

Jeśli zaznaczono jedno pole, pozostałe w grupie odznaczą.

Źródło

2011-01-15 superUntitled

+18

Dlaczego nie używać rzeczywistych przycisków opcji? Używanie pól wyboru jako przycisków radiowych spowoduje dezorientację użytkowników. – BoltClock

Mogę ubrać mojego psa jak kota, ale czy nie byłoby mądrzej po prostu dostać kota? – jondavidjohn

@Phrogz: Czy nie byłem wystarczająco poważny? :/ – BoltClock

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

To zrobi to, chociaż zgadzam się, że to może być zły pomysł.

przykład online: http://jsfiddle.net/m5EuS/1/

UPDATE dodano rozdzielania grupowego.

Źródło

2011-01-15 04:12:25 amosrivera

Zrób to "input.radio:checkbox" i masz umowę. –

to działa, prawie, jedyna część, która nie działa w tym przykładzie, to fakt, że nazwy grup checkbox są różne. W Twoim kodzie wpływają wszystkie pola wyboru na stronie, a nie te w określonym zestawie. – superUntitled

nie, ponieważ to by nie zadziałało, jeśli zauważysz nazwę, ma 2 grupy, masz działanie jako jedna duża grupa – jondavidjohn

Być może chcesz rozważyć inne podejście. Uważam, że chcesz ustawić przycisk opcji, by wyglądał jak pole wyboru. Jeśli tak, zobacz: this google search

Poniżej znajduje się uproszczony przykład, który pożyczam od www.thecssninja.com.

Po prostu ukrywa się: ukrywasz właściwy przycisk radiowy (patrz wejście css [typ = radio]) i nadpisujesz etykietę odpowiedniego przycisku radiowego, pokazując niestandardowe pole wyboru (z ikonki css w tle obraz wejściowy [type = radio] + etykieta) i przełącz na inny ikonkę w tle, gdy przycisk radiowy jest w stanie sprawdzenia. Uruchamianie przykład tutaj: 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>

Źródło

2011-01-15 04:24:28

Aktualizacja dla Jquery 1.9 - użyj .prop() zamiast .attr()

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

Oto przykład: http://jsfiddle.net/m5EuS/585/

Źródło

2013-04-20 05:33:45 user2301396

Dziękuję za to wejście! – kezi

Dziękujemy za tę aktualizację! – ncrocfer

ou tutaj, po prostu zauważyłem, że w dodatku :) thx – stenly

zasadniczo taka sama odpowiedź jak @amosrivera ale usunąć odznaczając wszystkich pól wyboru jako konieczne. zamiast tego użyj .not()

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

Źródło

2014-02-10 17:30:24 Rob

to nie będzie działać jako przycisk radiowy, należy ustawić za każdym razem sprawdzać po kliknięciu – stenly

Dzięki temu pomogło mi to, aby go również unieważnić. Ładny approch z funkcją nie. –

Chciałbym komentować, ale nie mam przedstawiciela. Użyj .change nie .Kliknij dla dostępności i tak to działa z klawiatury, tak jak poniżej:

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

Źródło

2014-08-28 18:51:54 Davorama

Jeśli stosuje się klasę do wyboru, można łatwo osiągnąć funkcjonalność przycisku radiowego stosując następujący fragment kodu:

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

Źródło

2014-10-16 10:19:14

w przypadku wybrania opcji „$ (” input: checkbox „)” będzie zaznaczyć cały wyboru, dzięki czemu można określić inną opcję za pomocą ich nazwy.

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

poniższym przykładzie wyjaśni

\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>

$ (this) .prop ("sprawdzone", true); });

Źródło

2015-05-20 10:01:49

Zaktualizowałem skrypt Fiddle, jQuery zaginął. Teraz z prop i attr (użyj obu).

$('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

Źródło

2016-05-27 20:37:17

wydarzenie Zastosowanie zmiana wyboru i przypisać sprawdzenia wartości dla aktualnie wybranego wyboru:

\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>

Źródło

2016-09-28 12:37:43

zaktualizowany skrypt (poprzez odpowiedź od Tomislav), więc może także odznaczyć WSZYSTKIE pola wyboru. Po prostu dodałem .not (this) i usunąłem linię, w której zaznaczono bieżące pole wyboru.

$('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/

Źródło

2016-09-30 06:04:01 David

Rozwiązanie podane nie dba o stan początkowy, który różni się od zachowania przycisków radiowych. Dodatkowo uruchamia także zdarzenie zmiany po kliknięciu na już sprawdzone wejście.

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>

Zgadzam się również, że robi, że jest to zły pomysł, ale jeśli masz inną nazwę dla każdego wejścia (i nie można ich zmienić), nie ma innego wyboru ..

Źródło

2017-03-30 00:20:12 gtournie

jQuery: zaznacz pola wyboru zachowywać się jak przyciski radiowe?

Odpowiedz

Powiązane problemy