jQuery: Aktivieren Sie Checkboxen wie Optionsfelder?

Gibt es eine Möglichkeit, Checkboxen wie Radio-Buttons zu machen? Ich nehme an, das könnte mit jQuery gemacht werden?jQuery: Aktivieren Sie Checkboxen wie Optionsfelder?

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

Wenn ein Kontrollkästchen aktiviert war, würden die anderen in der Gruppe deaktiviert.

Quelle

2011-01-15 superUntitled

+18

Warum verwenden Sie keine tatsächlichen Optionsfelder? Die Verwendung von Kontrollkästchen als Radio-Buttons wird Ihre Benutzer verwirren. – BoltClock

Ich könnte meinen Hund wie eine Katze kleiden, aber wäre es nicht klüger, nur eine Katze zu bekommen? – jondavidjohn

@Phrogz: War ich nicht ernst genug? :/ – BoltClock

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

Dies wird es tun, obwohl ich zustimmen, dass dies eine schlechte Idee sein könnte.

Online Beispiel: http://jsfiddle.net/m5EuS/1/

UPDATE hinzugefügt Gruppentrennung.

Quelle

2011-01-15 04:12:25 amosrivera

Machen Sie es "input.radio:checkbox" und Sie haben einen Deal. –

das funktioniert, fast, der einzige Teil, der im Beispiel nicht funktioniert, ist die Tatsache, dass die Namen der Checkbox-Gruppen unterschiedlich sind. In Ihrem Code sind alle Kontrollkästchen auf der Seite betroffen und nicht die in einem bestimmten Satz. – superUntitled

nein, weil das immer noch nicht funktioniert, wenn du den Namen bemerkst, hat er 2 Gruppen, du hast es als eine große Gruppe agiert – jondavidjohn

Vielleicht möchten Sie einen anderen Ansatz in Betracht ziehen. Ich glaube, Sie möchten den Radio-Button so gestalten, dass er wie eine Checkbox aussieht. Wenn ja, sehen Sie: this google search

Und unten ist ein vereinfachtes Beispiel, dass ich von www.thecssninja.com borgen kann.

Um es einfach auszudrücken: Sie verstecken die tatsächliche Radio-Taste (siehe die css-Eingabe [type = radio]) und Sie stylen die Bezeichnung für die entsprechende Radio-Taste, um die benutzerdefinierte Kontrollkästchen (von der CSS Sprite im Hintergrund image in input [type = radio] + label) und zu einem anderen Sprite im Hintergrund wechseln, wenn sich der Radiobutton im aktivierten Zustand befindet. Laufen Beispiel hier: 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>

Quelle

2011-01-15 04:24:28

Aktualisiert für Jquery 1.9-.prop() statt .attr()

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

verwenden Hier ist ein Beispiel: http://jsfiddle.net/m5EuS/585/

Quelle

2013-04-20 05:33:45 user2301396

Vielen Dank für diese Eingabe! – kezi

Danke für dieses Update! – ncrocfer

ou hier du gehst, ich habe gerade festgestellt, dass in Ergänzung zu :) thx – stenly

im Grunde die gleiche Antwort wie @amosrivera sondern entfernen Sie das Entfernen des Häkchens von allen Checkboxen als notwendig. stattdessen verwenden .not()

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

Quelle

2014-02-10 17:30:24 Rob

dies wird nicht funktionieren als Radio-Taste, müssen Sie jedes Mal auf klicken Sie auf – stenly

Thanks dies half mir heraus, es auch nicht kontrollierbar zu machen. Schöne Annäherung mit der Nichtfunktion. –

Ich würde kommentieren, aber nicht die rep. Verwenden Sie .change, .click nicht für die Zugänglichkeit und so funktioniert es mit der Tastatur, etwa so:

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

Quelle

2014-08-28 18:51:54 Davorama

Wenn Sie Klasse der Checkbox anwenden, können Sie ganz einfach die Radio-Button-Funktionalität mit dem folgende Stück Code erreichen:

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

Quelle

2014-10-16 10:19:14

Wenn Sie „wählen $ (“ input: Checkbox „)“ werden alle die Checkbox auswählen, damit Sie die verschiedenen Optionsfeld, indem sie ihre Namen angeben können.

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

Im Folgenden Beispiel wird

\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 ("geprüft", true) erklären; });

Quelle

2015-05-20 10:01:49

Ich aktualisierte das Fiddle-Skript, jQuery fehlte. Jetzt mit prop und attr (beide verwenden).

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

Quelle

2016-05-27 20:37:17

Verwenden Änderungsereignis von Checkbox und geprüft Wert für aktuell ausgewählte Checkbox zuweisen:

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

Quelle

2016-09-28 12:37:43

das Skript aktualisiert (über Antwort von Tomislav), so dass Sie Sie können auch alle Kontrollkästchen deaktivieren. Habe gerade ein .not (this) hinzugefügt und die Zeile entfernt, in der das aktuelle Kontrollkästchen aktiviert ist.

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

Quelle

2016-09-30 06:04:01 David

Die Lösung nicht kümmern sich um den Anfangszustand gegeben, das von dem Radio-Buttons Verhalten unterscheidet. Außerdem löst es ein Änderungsereignis aus, wenn auf eine bereits überprüfte Eingabe geklickt wird.

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>

Ich bin damit einverstanden, dass das zu tun ist eine schlechte Idee, aber wenn man für jeden Eingang einen anderen Namen haben (und sie nicht ändern kann), gibt es keine andere Wahl .. .

Quelle

2017-03-30 00:20:12 gtournie

jQuery: Aktivieren Sie Checkboxen wie Optionsfelder?

Antwort

Verwandte Themen