it-swarm.com.de

jQuery prüfen/deaktivieren das Optionsfeld beim Klicken

Ich habe diesen Code zum Aktivieren/Deaktivieren eines Optionsfelds beim Klicken.

Ich weiß, es ist nicht gut für die Benutzeroberfläche, aber ich brauche das.

$('#radioinstant').click(function() {     
  var checked = $(this).attr('checked', true);
  if(checked){ 
    $(this).attr('checked', false);
  }
  else{ 
    $(this).attr('checked', true);
  }
});

Die obige Funktion funktioniert nicht.

Wenn ich auf die Schaltfläche klicke, ändert sich nichts. Es bleibt geprüft. Warum? Wo ist der fehler Ich bin kein jQuery-Experte. Ich bin bei jQuery 1.3.2

Um nur klar zu sein, #radioinstant ist die ID des Optionsfelds.

39
DiegoP.

Wenn Sie nur ein Kontrollkästchen mit Markierungen haben möchten, machen Sie sich keine Sorgen mit JQuery. Dies ist die Standardfunktionalität eines Kontrollkästchens beim Klicken. Wenn Sie jedoch zusätzliche Aufgaben ausführen möchten, können Sie diese mit JQuery hinzufügen. Vor jQuery 1.9 können Sie mithilfe von $(this).attr('checked'); den Wert anstelle von $(this).attr('checked', true); abrufen, da der zweite Wert den Wert setzt. 

Here ist eine Geigendemonstration, in der die Standard-Checkbox-Funktionalität gegenüber dem, was Sie mit JQuery machen, dargestellt wird. 

Hinweis: Nach JQuery 1.6 sollten Sie an allen drei Stellen $(this).prop; anstelle von $(this).attr verwenden (danke @Whatevo für diesen Hinweis und siehe hier für weitere Details ). 

UPDATE:

Verpasste die Anforderung, dass es sich um ein Optionsfeld handeln musste. Möglicherweise möchten Sie das Kontrollkästchen noch berücksichtigen, aber hier ist der aktualisierte Code für die Version des Radioeingangs. Es funktioniert, indem Sie die Variable previousValue als Attribut in das Kontrollkästchen setzen, da ich nicht glaube, dass prop in 1.3.2 unterstützt wird. Sie können dies auch in einer Bereichsvariablen tun, da manche Leute es nicht mögen, zufällige Attribute für Felder festzulegen. Hier ist das neue Beispiel.

UPDATE 2:

Wie bereits erwähnt, funktionierte die vorherige Lösung nur mit einem Optionsfeld. Hier ist eine Funktion, die eine Gruppe von Funkgeräten nach ihrem Namen abwählbar macht, und eine Geige :

var makeRadiosDeselectableByName = function(name){
    $('input[name=' + name + ']').click(function() {
        if($(this).attr('previousValue') == 'true'){
            $(this).attr('checked', false)
        } else {
            $('input[name=' + name + ']').attr('previousValue', false);
        }

        $(this).attr('previousValue', $(this).attr('checked'));
    });
};
23
Briguy37

Ich habe die vorherigen Vorschläge erweitert. Dies funktioniert bei mir mit mehreren Funkgeräten, die unter demselben Namen gekoppelt sind.

$("input[type='radio']").click(function()
{
  var previousValue = $(this).attr('previousValue');
  var name = $(this).attr('name');

  if (previousValue == 'checked')
  {
    $(this).removeAttr('checked');
    $(this).attr('previousValue', false);
  }
  else
  {
    $("input[name="+name+"]:radio").attr('previousValue', false);
    $(this).attr('previousValue', 'checked');
  }
});
37
Jurrie

Anstatt den überprüften Wert abzurufen, setzen Sie ihn mit:

var checked = $(this).attr('checked', true);

Um es richtig zu bekommen:

var checked = $(this).attr('checked');

Eine funktionierende Lösung (mit mehreren Optionsfeldern mit unterschiedlichen Werten):

// select radio buttons group (same name)
var radioButtons = $("input[type='radio'][name='rr']");
// save initial ckecked states
var radioStates = {};
$.each(radioButtons, function(index, rd) {
    radioStates[rd.value] = $(rd).is(':checked');
});

// handle click event
radioButtons.click(function() {

    // check/unchek radio button
    var val = $(this).val();  
    $(this).prop('checked', (radioStates[val] = !radioStates[val]));    

    // update other buttons checked state
    $.each(radioButtons, function(index, rd) {
        if(rd.value !== val) {
            radioStates[rd.value] = false; 
        }
    });
});

P.S .:$().attr sollte anstelle von $().prop für jquery <1.6 verwendet werden

Demo: jsFiddle

13
manji

Beste und kürzeste Lösung. Es funktioniert für jede Gruppe von Funkgeräten (mit demselben Namen).

$(document).ready(function(){
    $("input:radio:checked").data("chk",true);
    $("input:radio").click(function(){
        $("input[name='"+$(this).attr("name")+"']:radio").not(this).removeData("chk");
        $(this).data("chk",!$(this).data("chk"));
        $(this).prop("checked",$(this).data("chk"));
        $(this).button('refresh'); // in case you change the radio elements dynamically
    });
});

Weitere Informationen, hier .

Genießen.

12
Slavik Meltser

Ich glaube, das ist das Problem: Wenn Sie mehr als einen Radioknopf haben und einer von ihnen angeklickt wird, gibt es keine Möglichkeit, alle abzuwählen. Was benötigt wird, ist ein Selector "keine oder nur eine", daher sind Kontrollkästchen nicht geeignet. Möglicherweise haben Sie eine Schaltfläche "Löschen" oder ähnliches, um die Auswahl aller aufzuheben, aber es wäre schön, wenn Sie auf das ausgewählte Optionsfeld klicken, um die Auswahl aufzuheben und in den Status "Keine" zurückzukehren, damit Sie Ihre Benutzeroberfläche nicht stören eine zusätzliche Kontrolle.

Das Problem bei der Verwendung eines Click-Handlers ist, dass das Optionsfeld zum Zeitpunkt des Aufrufs bereits aktiviert ist. Sie wissen nicht, ob dies der erste Klick oder ein zweiter Klick auf ein bereits ausgewähltes Optionsfeld ist. Also verwende ich zwei Event-Handler, die den vorherigen Status mit der Maus festlegen, und dann den Click-Handler wie oben:

$("input[name=myRadioGroup]").mousedown(function () 
{
    $(this).attr('previous-value', $(this).prop('checked'));
});

$("input[name=myRadioGroup]").click(function () 
{
    var previousValue = $(this).attr('previous-value');

    if (previousValue == 'true')
        $(this).prop('checked', false);
});
2
jeeber

toggleAttr() wird von diesem sehr schönen und winzigen Plugin zur Verfügung gestellt.

Beispielcode

$('#my_radio').click(function() {
    $(this).toggleAttr('checked');
});

/**
 * toggleAttr Plugin
 */
jQuery.fn.toggleAttr = function(attr) {
    return this.each(function() {
        var $this = $(this);
        $this.attr(attr) ? $this.removeAttr(attr) : $this.attr(attr, attr);
    });
};

Noch mehr Spaß, Demo

Sie können Ihren Radioknopf innerhalb der Etiketten- oder Schaltflächen-Tags platzieren und einige schöne Dinge tun.

2
Nabil Kadimi

Nachdem ich einige der oben genannten Lösungen getestet hatte, die für mich nicht zu 100% funktionierten, entschied ich mich, meine eigene zu entwickeln. Es erstellt neue Klicklistener, nachdem ein Optionsfeld angeklickt wurde:

/**
 * Radio select toggler
 * enables radio buttons to be toggled when clicked
 * Created by Michal on 09/05/2016.
 */

var radios = $('input[type=radio]');

/**
 * Adds click listeners to all checkboxes to unselect checkbox if it was checked already
 */
function updateCheckboxes() {
    radios.unbind('click');
    radios.filter(':checked').click(function () {
        $(this).prop('checked', false);
    });
    radios.click(function () {
        updateCheckboxes();
    });
}

updateCheckboxes();
1
mick88

Verbesserte Version der Antwort von Jurrie

$('#myRadio').off('click').on('click', function() {
  if ($(this).data('checked')) {
    $(this).removeAttr('checked');
    $(this).data('checked', false);
  } else {
    $(this).data('checked', true);
  }
});

Live Demo

1

$ (document) .ready (function () { $ ("input: radio: checked"). data ("chk", true);

$("input:radio").click(function(){
    $("input[name='"+$(this).attr("name")+"']:radio").not(this).removeData("chk");

    $(this).data("chk",!$(this).data("chk"));

    $(this).prop("checked",$(this).data("chk"));
});

});

1
Aarti Goyal

Ich habe ein verwandtes, aber anderes Szenario. Folgendes mache ich:

Hinweis: Code zum Auswählen/Deaktivieren aller Optionsfelder der Klasse 'containerRadio', wenn das Hauptauswahlfeld ausgewählt ist.

CODE

        $('#selectAllWorkLot').click (function ()
        {

              var previousValue = $(this).attr('previousValue');

              if (previousValue == 'checked')
              {
                resetRadioButtonForSelectAll();

                //Unselect All
                unSelectAllContainerRadioButtons();
              }
              else
              {
                $(this).attr('previousValue', 'checked');

                //Select All
                selectAllContainerRadioButtons();
              }
        });


        function resetRadioButtonForSelectAll()
        {
            $('#selectAllWorkLot').removeAttr('checked');
            $('#selectAllWorkLot').attr('previousValue', false);
            //$('#selectAllWorkLot').prop('checked', false);
        }


        function selectAllContainerRadioButtons()
        {
            $('.containerRadio').prop('checked', true);
        }

        function unSelectAllContainerRadioButtons()
        {
            $('.containerRadio').prop('checked', false);
        }
0
Lijo

DiegoP,

Ich hatte die gleichen Probleme, bis mir klar wurde, dass das Häkchen auf der Box nicht erlischt, bis das Attribut entfernt wird. Das heißt, auch wenn der überprüfte Wert falsch ist, bleibt er dort.

Verwenden Sie daher die Funktion removeAttr (), und entfernen Sie das geprüfte Attribut, und es wird definitiv funktionieren.

0
iamkhush

Einfachste Lösung. Für Radio und Checkboxen.

$('body').on('click', 'input[type="checkbox"]', function(){
    if ($(this).attr('checked')){
        $( this ).attr( 'checked', false);
    } else {
        $( this ).attr( 'checked', true);
    }
});
$('body').on('click', 'input[type="radio"]', function(){
    var name = $(this).attr('name');
    $("input[name="+name+"]:radio").attr('checked', false);
    $( this ).attr( 'checked', true);
});
0
Harold

- BEARBEITEN -

Es sieht ganz so aus, als ob Ihr Code eine Radio-Eingabe dazu zwingt, sich wie eine Checkbox-Eingabe zu verhalten. Vielleicht möchten Sie nur eine Checkbox-Eingabe ohne jQuery verwenden. Wenn Sie jedoch erzwingen möchten, wie @manji gesagt hat, müssen Sie den Wert außerhalb des Click-Handlers speichern und ihn dann bei jedem Klick auf das Gegenteil von dem setzen, was er zu diesem Zeitpunkt ist. @ Manjis Antwort ist richtig, ich würde nur hinzufügen, dass Sie jQuery-Objekte zwischenspeichern sollten, anstatt das DOM erneut abzufragen:

var $radio = $("#radioinstant"),
    isChecked = $radio.attr("checked");

$radio.click(function() {

    isChecked = !isChecked;
    $(this).attr("checked", isChecked);

});
0
Code Maverick

hier ist eine einfache Lösung, ich hoffe, es wird Ihnen helfen. Hier ist ein einfaches Beispiel, um die Antwort zu verbessern.

$('[type="radio"]').click(function () {

            if ($(this).attr('checked')) {

                $(this).removeAttr('checked');
                $(this).prop('checked',false);

            } else {

                $(this).attr('checked', 'checked');

            }
        });

Demo Sorry für zu spät .. :)

0
sajid

Die Lösungen, die ich aus dieser Frage ausprobierte, haben bei mir nicht funktioniert. Von den Antworten, die teilweise funktionierten, stellte ich immer noch fest, dass ich das zuvor ungeprüfte Optionsfeld zweimal anklicken musste, um es erneut zu aktivieren. Ich verwende derzeit jQuery 3+.

Nachdem ich versucht hatte, dies mithilfe von Datenattributen oder anderen Attributen zum Laufen zu bringen, fand ich die Lösung schließlich mithilfe einer Klasse heraus.

Geben Sie für Ihre geprüfte Radio-Eingabe die Klasse checked an, z.

<input type="radio" name="likes_cats" value="Meow" class="checked" checked>

Hier ist die jQuery:

$('input[type="radio"]').click(function() {
    var name = $(this).attr('name');

    if ($(this).hasClass('checked')) {
        $(this).prop('checked', false);
        $(this).removeClass('checked');
    }
    else {
        $('input[name="'+name+'"]').removeClass('checked');
        $(this).addClass('checked');
    }
});
0
kjdion84

Ich habe https://stackoverflow.com/a/13575528/80353 genommen und es so angepasst

$(document).ready(function() {

        $('body').on('click', 'input[type="radio"]', function() {
            changeCheckedAttributes($(this));
        });
        function changeCheckedAttributes(elt) {
            $("input[name='"+$(elt).attr("name")+"']:radio").not($(elt)).removeData("chk");
            $("input[name='"+$(elt).attr("name")+"']:radio").not($(elt)).removeAttr("checked");
            $("input[name='"+$(elt).attr("name")+"']:radio").not($(elt)).prop("checked", false);
            $(elt).data("chk",!$(elt).data("chk"));
            $(elt).prop("checked", true);
            $(elt).attr("checked", $(elt).data("chk"));
        }

    });
0
Kim Stacks

Diese Funktion fügt allen Radiobuttons ein Häkchen hinzu

jQuery(document).ready(function(){
jQuery(':radio').click(function()
{
if ((jQuery(this).attr('checked') == 'checked') && (jQuery(this).attr('class') == 'checked'))
{   
    jQuery(this).attr('class','unchecked');
    jQuery(this).removeAttr('checked');
} else {
jQuery(this).attr('class','checked');
}//or any element you want

});
});
0
Remco

Diese letzte Lösung hat für mich funktioniert. Ich hatte ein Problem mit undefined und einem Objektobjekt oder gab immer false zurück und gab immer true zurück. Diese Lösung funktioniert jedoch beim Prüfen und Deaktivieren.

Dieser Code zeigt Felder an, wenn darauf geklickt wird, und blendet Felder aus, wenn sie nicht markiert sind:

$("#new_blah").click(function(){
   if ($(this).attr('checked')) {

            $(this).removeAttr('checked');
    var radioValue = $(this).prop('checked',false);
    // alert("Your are a rb inside 1- " + radioValue);
    // hide the fields is the  radio button is no     
    $("#new_blah1").closest("tr").hide();
    $("#new_blah2").closest("tr").hide();

    } 
    else {

    var radioValue =  $(this).attr('checked', 'checked');
    // alert("Your are a rb inside 2 - " + radioValue);
    // show the fields   when radio button is set to  yes
    $("#new_blah1").closest("tr").show();
    $("#new_blah2").closest("tr").show();

}
0
user7957126

Ich würde das vorschlagen:

$('input[type="radio"].toggle').click(function () {
    var $rb = $(this);

    if ($rb.val() === 'on') {
        $rb.val('off');
        this.checked = false;
    }
    else {
        $rb.val('on');
        this.checked = true;
    }
});

Ihr HTML würde so aussehen:

<input type="radio" class="toggle" value="off" />
0
Tad Carter

Ich hatte ein verwandtes Problem - Ich musste ein Dialogfeld aus der Dropdown-Liste öffnen, basierend auf der Auswahl aus der Dropdown-Liste. Es kann jeweils nur ein Optionsfeld aktiviert werden.

  • Option 1 zeigt zwei Optionsfelder mit dem ersten ausgewählten Radio
  • Option 2 zeigt das zweite Optionsfeld und die Auswahl.

Das Skript funktioniert einige Zeit, es injiziert das markierte, aber das Kontrollkästchen ist noch deaktiviert

Ich ging zu jQuery .prop() , scheint jquery .prop() .attr() einige Komplikationen mit Radioknöpfen zu haben, wenn Sie attr oder prop verwenden. Was ich stattdessen getan habe, ist der Klick auf den Radioknopf basierend auf Select value.

Dies beseitigt die Notwendigkeit der Verwendung von attr oder prop oder der Verwendung von langwierigem Code.

myForm = $("#myForm");

if (argument === 'multiple') {
            myForm.find('#radio1').parent('li').hide();
            myForm.find('#radio2').trigger('click');
    }
    else{
        myForm.find('#radio1').trigger('click');
         myForm.find('#radio1').parent('li').show();
    }

Nicht sicher, ob dies die beste Methode ist, aber es funktioniert wie Charme

0
Shraftali

Wenn Sie noch mehr Antworten wünschen, habe ich festgestellt, dass dies mit allen Optionsfeldern funktioniert:

<script type="text/javascript">
        jQuery(document).ready(function ($){
                    var allRadios = $('input[type=radio]')
                    var radioChecked;

                    var setCurrent = 
                                    function(e) {
                                        var obj = e.target;

                                        radioChecked = $(obj).attr('checked');
                                 }

                    var setCheck = 
                                function(e) {

                                    if (e.type == 'keypress' && e.charCode != 32) {
                                        return false;
                                    }

                                    var obj = e.target;

                         if (radioChecked) {
                         $(obj).attr('checked', false);
                         } else {
                         $(obj).attr('checked', true);
                         }
                             }    

                    $.each(allRadios, function(i, val){        
                         var label = $('label[for=' + $(this).attr("id") + ']');

                     $(this).bind('mousedown keydown', function(e){
                            setCurrent(e);
                        });

                        label.bind('mousedown keydown', function(e){
                            e.target = $('#' + $(this).attr("for"));
                            setCurrent(e);
                        });

                     $(this).bind('click', function(e){
                            setCheck(e);    
                        });

                    });
        });
</script>
0
Nicole

Wenn Sie auf klicken und nur prüfen, ob Radio aktiviert ist, und dann die Auswahl aufheben, wird das Radio niemals überprüft. Am einfachsten ist es also, Klassennamen wie folgt zu verwenden:

if($(this).hasClass('alreadyChecked')) {//it is already checked
        $('.myRadios').removeClass('alreadyChecked');//remove from all radios
        $(this).prop('checked', false);//deselect this
    }
    else {
        $('.myRadios').removeClass('alreadyChecked');//remove from all
        $(this).addClass('alreadyChecked');//add to only this
    }