webentwicklung-frage-antwort-db.com.de

jQuery: Ankreuzfelder wie Optionsfelder wirken lassen?

Gibt es eine Möglichkeit, Kontrollkästchen als Optionsfelder zu verwenden? Ich gehe davon aus, dass dies mit jQuery möglich ist.

<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 wäre, würden die anderen Mitglieder der Gruppe das Kontrollkästchen deaktivieren.

15
superUntitled
$("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 damit einverstanden bin, dass dies eine schlechte Idee sein könnte.

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

UPDATEGruppentrennung hinzugefügt.

37
amosrivera

Aktualisiert für Jquery 1.9 - .prop() anstelle von .attr() verwenden

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

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

7
user2301396

grundsätzlich die gleiche Antwort wie @amosrivera, aber entfernen Sie das Häkchen aller Kontrollkästchen, wenn dies erforderlich ist. benutze stattdessen .not ()

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

Wenn Sie dem Kontrollkästchen eine Klasse zuweisen, können Sie die Optionsfeldfunktion mit dem folgenden Code auf einfache Weise erreichen:

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

Vielleicht möchten Sie einen anderen Ansatz in Betracht ziehen. Ich glaube, Sie möchten das Optionsfeld so gestalten, dass es wie ein Kontrollkästchen aussieht. Wenn ja, siehe: diese Google-Suche

Und unten ist ein vereinfachtes Beispiel, das ich von www.thecssninja.com ausgeliehen habe.

Einfach ausgedrückt: Sie verbergen das aktuelle Optionsfeld (siehe CSS-Eingabe [Typ = Radio]) und formatieren die Beschriftung für das entsprechende Optionsfeld, um das benutzerdefinierte Kontrollkästchen (aus dem CSS-Sprite im Hintergrundbild in Eingabe [Typ) anzuzeigen = radio] + label) und wechseln Sie im Hintergrund zu einem anderen Sprite, wenn das Optionsfeld aktiviert ist. Laufendes 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>
3
Jimmy Chandra

Das Skript wurde aktualisiert (per Antwort von Tomislav), sodass Sie auch ALLE Kontrollkästchen deaktivieren können. Fügen Sie einfach eine .not (this) hinzu und entfernen Sie die Zeile, 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/

2
David

Ich würde einen Kommentar abgeben, aber ich habe keinen Repräsentanten. Verwenden Sie .change und nicht .click für die Barrierefreiheit. So funktioniert es mit der Tastatur:

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

Die angegebene Lösung berücksichtigt nicht den Anfangszustand, der sich vom Verhalten der Optionsfelder unterscheidet. Außerdem wird ein Änderungsereignis ausgelöst, wenn Sie auf eine bereits überprüfte Eingabe klicken.

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 stimme auch zu, dass dies eine schlechte Idee ist, aber wenn Sie für jeden Eingang einen anderen Namen haben (und diese nicht ändern können), gibt es keine andere Wahl ...

0
gtournie

Ich habe das Skript Fiddle aktualisiert, jQuery fehlte. Jetzt mit prop und attr (beides 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

0

Wenn Sie "$ (" input: checkbox ")" auswählen, werden alle Kontrollkästchen aktiviert, sodass Sie die verschiedenen Optionsfelder mithilfe ihres Namens angeben können.

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

Nachfolgendes Beispiel wird erläutert

        $("[name='sname1']").click(function(){
    var group = "input:checkbox[name='"+$(this).attr("name")+"']";
    $(group).prop("checked",false);
    $(this).prop("checked",true);
        
        
});
<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 ("checked", true); });

0
Merbin Joe

Verwenden Sie das Kontrollkästchen Änderungsereignis und weisen Sie dem aktuell ausgewählten Kontrollkästchen einen aktivierten Wert zu:

        $("input[type=checkbox]").change(function()
        {
                $("input[type=checkbox]").prop('checked',false);
                $(this).prop('checked',true);
        });
.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>