jQuery aktivieren / deaktivieren Optionsfeld onclick

Wenn alles, was Sie tun möchten, ist eine checkbox, die prüft, sorgen sich nicht über es zu tun mit JQuery. Das ist Standard-Funktionalität einer checkbox klicken. Jedoch, wenn Sie wollen, um zusätzliche Dinge, die Sie hinzufügen können Sie mit JQuery. Vor jQuery 1.9, die Sie verwenden können, verwenden Sie $(this).attr('checked'); zu erhalten die Wert statt $(this).attr('checked', true);, als zweites wird der Wert gesetzt.

Hier ist ein fiddle-demonstration, die zeigt, dass die Standard-checkbox-Funktionalität vs. was Sie tun mit JQuery.

Hinweis: Nach JQuery 1.6, sollten Sie $(this).prop; statt $(this).attr in allen drei Orten (danke @Whatevo für den Hinweis und siehe hier für weitere details).

UPDATE:

Sorry, verpasste der Voraussetzung, dass es ein radio-button. Sie können immer noch wollen, betrachten Sie die checkbox, aber hier ist der aktualisierte code für den radio-input version. Es funktioniert durch die Einstellung der previousValue als Attribut auf das Kontrollkästchen, wie ich glaube nicht, dass prop unterstützt 1.3.2. Man könnte dies auch in einem Gültigkeitsbereich von Variablen, wie manche Menschen wissen nicht, wie die Einstellung zufällige Attribute auf Felder. Hier ist das neue Beispiel.

UPDATE 2:

Als Josh darauf hingewiesen, die bisherige Lösung war nur möglich mit einem radio-button. Hier ist eine Funktion, eine Gruppe von Funkgeräten abwählbar durch Ihren Namen und eine fiddle:

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'));
    });
};

InformationsquelleAutor der Antwort Briguy37

Anstatt sich die checked-Wert, den Sie setzen es mit:

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

Richtig:

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

Eine funktionierende Lösung (mit mehreren radio-buttons 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 verwendet werden, anstelle von $().prop für jquery < 1.6

Demo: jsFiddle

InformationsquelleAutor der Antwort manji

Ich glaube, das ist das problem: Wenn Sie mehr als ein radio-button, und eine von Ihnen angeklickt wird, es gibt keine Möglichkeit zum deaktivieren Sie alle von Ihnen. Was benötigt wird, ist ein "keine oder nur eine" Auswahl, also Kontrollkästchen nicht angemessen wäre. Sie hätten einen "clear" button oder so etwas, deaktivieren Sie alle, aber es wäre schön, um nur auf den markierten radio-button, um es zu deaktivieren und gehen Sie zurück zu den "none" - Zustand, so dass Sie nicht Unordnung Ihre Benutzeroberfläche mit einer extra Kontrolle.

Das problem mit der Verwendung eines Klick-Prozedur ist, dass durch die Zeit, die aufgerufen wird, den radio-button ist bereits aktiviert. Sie weiß nicht, ob dies das erste oder klicken Sie auf einen zweiten Klick auf ein schon markiertes Optionsfeld. So bin ich mit zwei event Handler mousedown zu setzen, den vorherigen Zustand, dann wird der click-handler, wie oben verwendet:

$("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);
});

InformationsquelleAutor der Antwort jeeber

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

InformationsquelleAutor der Antwort Mithun Sreedharan

-- EDIT --

Sieht es sicher wie dein code dazu zwingt, radio-Eingang zu Verhalten, wie ein checkbox-input. Man könnte meinen, über die nur mit einer checkbox-Eingabe ohne die Notwendigkeit für jQuery. Allerdings, wenn Sie erzwingen wollen, so wie @manji sagte, Sie brauchen, um den Wert zu speichern außerhalb der click-handler, und dann legen Sie es auf jede klicken Sie, um das Gegenteil von dem, was es ist an jener Zeit. @manji ' s Antwort ist richtig, ich würde nur hinzufügen, dass Sie sollten cache-jQuery-Objekten anstelle von re-Abfragen der DOM:

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

$radio.click(function() {

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

});

InformationsquelleAutor der Antwort Code Maverick

Wenn Sie noch mehr Antworten, die ich gefunden habe, dass dies funktioniert mit allen radio-buttons:

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

InformationsquelleAutor der Antwort Nicole

Nahm ich https://stackoverflow.com/a/13575528/80353 und angepasst, wie dies

$(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"));
        }

    });

InformationsquelleAutor der Antwort Kim Stacks

Ich habe eine Verwandte, aber anders. Folgende ist, was ich Tue:

Hinweis: Code zu aktivieren/deaktivieren Sie alle Optionsfelder der Klasse 'containerRadio', wenn die wichtigsten radio-button 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);
        }

InformationsquelleAutor der Antwort Lijo

hier ist die einfache Lösung, ich hoffe es wird Euch helfen. hier ein einfaches Beispiel zur Verbesserung der Antwort.

$('[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.. 🙂

InformationsquelleAutor der Antwort sajid

Den Lösungen, die ich habe versucht, aus dieser Frage nicht für mich arbeiten. Von den Antworten, die gearbeitet, teilweise habe ich noch festgestellt, dass ich hatte, um auf das vorher nicht aktiviert radio-button zweimal, nur um es nochmals überprüft. Ich bin momentan auf der Verwendung von jQuery 3+.

Nach Herumspielen mit dem Versuch, diese zu bekommen, um die Arbeit mit Daten, Attribute oder andere Attribute, endlich fand ich die Lösung durch die Verwendung einer Klasse statt.

Für Ihr aufgegebenes radio-Eingang, geben Sie die Klasse checked z.B.:

<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');
    }
});

InformationsquelleAutor der Antwort kjdion84