Wie prüft man einen Radio-Button mit jQuery?

Question

Ich versuche, ein Optionsfeld mit jQuery zu überprüfen. Hier ist mein Code:

<form>
    <div id='type'>
        <input type='radio' id='radio_1' name='type' value='1' />
        <input type='radio' id='radio_2' name='type' value='2' />
        <input type='radio' id='radio_3' name='type' value='3' /> 
    </div>
</form>

Und das JavaScript:

jQuery("#radio_1").attr('checked', true);

Funktioniert nicht:

jQuery("input[value='1']").attr('checked', true);

Funktioniert nicht:

jQuery('input:radio[name="type"]').filter('[value="1"]').attr('checked', true);

Funktioniert nicht:

Haben Sie eine andere Idee? Was übersehe ich?

Answer 1

Utilice prop() mehtod

Fuente Link

<p>
    <h5>Radio Selection</h5>

    <label>
        <input type="radio" name="myRadio" value="1"> Option 1
    </label>
    <label>
        <input type="radio" name="myRadio" value="2"> Option 2
    </label>
    <label>
        <input type="radio" name="myRadio" value="3"> Option 3
    </label>
</p>

<p>
    <button>Check Radio Option 2</button>
</p>

<script>
    $(function () {

        $("button").click(function () {
            $("input:radio[value='2']").prop('checked',true);
        });

    });
</script>

Answer 2

Versuchen Sie dies:

$("input[name=type]").val(['1']);

http://jsfiddle.net/nwo706xw/

Answer 3

El $.prop Weg ist besser:

$(document).ready(function () {                            
    $("#radio_1").prop('checked', true);        
});

und Sie können es wie folgt testen:

$(document).ready(function () {                            
    $("#radio_1, #radio_2", "#radio_3").change(function () {
        if ($("#radio_1").is(":checked")) {
            $('#div1').show();
        }
        else if ($("#radio_2").is(":checked")) {
            $('#div2').show();
        }
        else 
            $('#div3').show();
    });        
});

Answer 4

Überraschenderweise ignoriert die beliebteste und am meisten akzeptierte Antwort das Auslösen eines entsprechenden Ereignisses trotz der Kommentare. Stellen Sie sicher, dass Sie die .change() , andernfalls wird dieses Ereignis von allen "on change"-Bindungen ignoriert.

$("#radio_1").prop("checked", true).change();

Answer 5

Diese Antwort verdanken wir Paul LeBeau in ein Kommentar . Ich dachte, ich schreibe es als richtige Antwort auf, da es überraschenderweise keine gab.

Das einzige, was bei mir funktionierte (jQuery 1.12.4, Chrome 86), war:

$(".js-my-radio-button").trigger("click");

Dies tut alles, was ich will - ändert, welche Optionsschaltfläche ausgewählt aussieht (sowohl visuell als auch programmgesteuert) und löst Ereignisse aus wie change auf die Optionsschaltfläche.

Das Setzen des Attributs "checked", wie es in anderen Antworten vorgeschlagen wird, ändert nicht, welche Optionsschaltfläche ausgewählt wurde.