Wie überprüfe ich ein Optionsfeld mit jQuery?

890

Ich versuche mit jQuery ein Optionsfeld zu aktivieren. 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:

Hast du eine andere Idee? Was vermisse ich?

Alexis
quelle
1
Vielen Dank für Ihre Antworten! Ich habe das Problem gefunden. Tatsächlich funktionieren die beiden ersten Möglichkeiten. Der Punkt ist, dass ich jqueryUI verwendet habe, um einen Satz von 3 Optionsfeldern in einen Schaltflächensatz mit diesem Code umzuwandeln: jQuery ("# ​​type"). Buttonset (); Aber diese Änderung vor dem Überprüfen des Radios hat das Funkgerät beschädigt (ich weiß nicht warum). Schließlich habe ich den Button-Set-Anruf nach Überprüfung des Radios getätigt und es funktioniert einwandfrei.
Alexis
Verwenden Sie $ ("Eingabe: Radio [Wert = '2']"). Prop ('geprüft', wahr); Link hier freakyjolly.com/…
Code Spy

Antworten:

1469

Verwenden Sie für Versionen von jQuery gleich oder höher (> =) 1.6:

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

Verwenden Sie für Versionen vor (<) 1.6:

$("#radio_1").attr('checked', 'checked');

Tipp: Möglicherweise möchten Sie auch anrufen click()oder anschließend change()das Optionsfeld aktivieren. Weitere Informationen finden Sie in den Kommentaren.

Mike Thomsen
quelle
80
In jQuery 1.9 oder höher funktioniert diese Lösung nicht. Verwenden Sie $ ("# radio_1"). Prop ("geprüft", true); stattdessen.
Installero
12
@Installero ist eigentlich prepkorrekt seit 1.6 und erforderlich seit 1.9.
John Dvorak
43
Es ist hilfreich, .change()am Ende hinzuzufügen , um andere Ereignisse auf der Seite auszulösen.
Foxinni
13
Es kann ratsam sein, diese Antwort so anzuordnen, dass sie .propeindeutig die richtige Antwort ist und die .attrMethode ein Hinweis für jQuery <1.6 ist.
Patrick
22
Wenn Sie möchten, dass die anderen Optionsfelder in der Radiogruppe ordnungsgemäß aktualisiert werden, verwenden Sie$("#radio_1").prop("checked", true).trigger("click");
Paul LeBeau
256

Versuche dies.

In diesem Beispiel ziele ich mit dem Eingabenamen und dem Wert darauf ab

$("input[name=background][value='some value']").prop("checked",true);

Gut zu wissen: Bei einem Wert mit mehreren Wörtern funktioniert dies auch aufgrund von Apostrophen.

Vladimir Djuricic
quelle
5
Dies ist wahrscheinlich der beste Weg, die anderen neigen dazu, dort zu bleiben und die Funktion beim zweiten Mal unbrauchbar zu machen, während dies wie erwartet funktioniert
Roy Toledo
Da nur eine ausgewählt werden kann, ist $ ('input [name = "type"]: checked'). Val () ebenfalls hilfreich.
Huggie
Bitte erläutern Sie. Die allgemeine Idee ist, ein Optionsfeld zu aktivieren, das es mit seinen Attributen - Name und optional Wert - adressiert. Ich bin mir nicht sicher, was Sie damit erreichen wollen, da nur das Namensattribut und der: geprüfte Pseudo-Selektor verwendet werden. Und Sie rufen auch val ab, was ziemlich verwirrend ist. Vielen Dank
Vladimir Djuricic
2
Ich wollte gerade allen meinen Radios eine "ID" hinzufügen, aber diese Methode funktionierte einwandfrei. Aber denken Sie daran, dass Sie, wenn Ihr Wert aus mehreren Wörtern besteht (sagen Sie "Farbe lila"), entsprechende Anführungszeichen einfügen müssen: $("input[name=background][value='color purple']").prop("checked",true);
Tristan Tao
3
Viel besser als die ausgewählte Antwort! Genau das, wonach ich gesucht habe. Dies ist allgemein gehalten, während die ausgewählte Antwort spezifisch ist. Super, danke.
GarbageGigo
96

Eine weitere Funktion prop (), die in jQuery 1.6 hinzugefügt wurde und denselben Zweck erfüllt.

$("#radio_1").prop("checked", true); 
Umesh Patil
quelle
13
Das attr('checked', true)hat für mich mit jQuery 1.9 aufgehört zu arbeiten, das ist die Lösung!
Pascal
1
scheint, dass prop("checked", true)das funktioniert, attr('checked', 'checked')nicht
Tomasz Kuter
@TomaszKuter Ich empfehle die Verwendung von prop (), da die überprüfte DOM-Eigenschaft das Verhalten beeinflussen sollte - aber es ist seltsam - in dieser Geige ( jsfiddle.net/KRXeV ) attr('checked', 'checked')funktioniert tatsächlich x)
jave.web
Hier ist eine gute Begriffsklärung stackoverflow.com/questions/5874652/prop-vs-attr
code_monk
81

Kurze und leicht lesbare Option:

$("#radio_1").is(":checked")

Es gibt true oder false zurück, sodass Sie es in der if-Anweisung verwenden können.

Karbaman
quelle
5
Vielen Dank! Dies ist, wonach ich gesucht habe, aber (zu Ihrer Information) das OP hat gefragt, wie das Optionsfeld eingestellt werden soll, nicht der Wert. (Das Wort "Scheck" machte die Frage verwirrend.)
Bampfer
31

Versuche dies.

Verwenden Sie diese Option, um das Optionsfeld mit Wert zu aktivieren .

$('input[name=type][value=2]').attr('checked', true); 

Oder

$('input[name=type][value=2]').attr('checked', 'checked');

Oder

$('input[name=type][value=2]').prop('checked', 'checked');

Verwenden Sie diese Option, um das Optionsfeld anhand der ID zu überprüfen .

$('#radio_1').attr('checked','checked');

Oder

$('#radio_1').prop('checked','checked');
Lakshmana Kumar
quelle
14

Versuche dies:

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

http://jsfiddle.net/nwo706xw/

user4457035
quelle
Wichtig .val(['1'])nicht.val('1')
Bob Stein
13

Der $.propWeg 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();
    });        
});
Amin Saqi
quelle
9

Du musst

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

Das ist das HTML-Attribut

JohnP
quelle
7

Wenn die Eigenschaft namenicht funktioniert, vergessen Sie nicht, dass sie idnoch vorhanden ist. Diese Antwort ist für Leute, die das idhier so ansprechen möchten, wie Sie es tun.

$('input[id=element_id][value=element_value]').prop("checked",true);

Weil Eigentum namebei mir nicht funktioniert. Stellen Sie sicher, dass Sie nicht umgeben idund namemit doppelten / einfachen Anführungszeichen.

Prost!

Anjana Silva
quelle
7

Ja, es hat bei mir wie ein Weg funktioniert:

$("#radio_1").attr('checked', 'checked');
Anjan Kant
quelle
6

Versuche dies

$(document).ready(function(){
    $("input[name='type']:radio").change(function(){
        if($(this).val() == '1')
        {
          // do something
        }
        else if($(this).val() == '2')
        {
          // do something
        }
        else if($(this).val() == '3')
        {
          // do something
        }
    });
});
Jordan Jelinek
quelle
6

Überraschenderweise ignoriert die beliebteste und akzeptierte Antwort das Auslösen eines geeigneten Ereignisses trotz der Kommentare. Stellen Sie sicher .change() , dass Sie aufrufen , da sonst alle "On Change" -Bindungen dieses Ereignis ignorieren.

$("#radio_1").prop("checked", true).change();
Apatsekin
quelle
5
$("input[name=inputname]:radio").click(function() {
    if($(this).attr("value")=="yes") {
        $(".inputclassname").show();
    }
    if($(this).attr("value")=="no") {
        $(".inputclassname").hide();
    }
});
Eray
quelle
5

Wert erhalten:

$("[name='type'][checked]").attr("value");

Sollwert:

$(this).attr({"checked":true}).prop({"checked":true});

Optionsfeld Klicken Sie auf Add attr aktiviert:

$("[name='type']").click(function(){
  $("[name='type']").removeAttr("checked");
  $(this).attr({"checked":true}).prop({"checked":true});
});
Naim Serin
quelle
5

Wir sollten sagen wollen, dass es sich um eine radioSchaltfläche handelt. Bitte versuchen Sie es mit dem folgenden Code.

$("input[type='radio'][name='userRadionButtonName']").prop('checked', true);
UWU_SANDUN
quelle
5

Nur für den Fall, dass jemand versucht, dies während der Verwendung der jQuery-Benutzeroberfläche zu erreichen, müssen Sie auch das Kontrollkästchenobjekt der Benutzeroberfläche aktualisieren, um den aktualisierten Wert wiederzugeben:

$("#option2").prop("checked", true); // Check id option2
$("input[name='radio_options']").button("refresh"); // Refresh button set
Freeworlder
quelle
4

Ich benutze diesen Code:

Es tut mir leid für Englisch.

var $j = jQuery.noConflict();

$j(function() {
    // add handler
    $j('#radio-1, #radio-2').click(function(){

        // find all checked and cancel checked
        $j('input:radio:checked').prop('checked', false);

        // this radio add cheked
        $j(this).prop('checked', true);
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset class="section">
  <legend>Radio buttons</legend>
  <label>
    <input type="radio" id="radio-1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
  <br>
  <label>
    <input type="radio" id="radio-2">
    Option two can be something else
  </label>
</fieldset>

volitilov
quelle
4

Versuchen Sie dies anhand eines Beispiels

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
<input type="radio" name="radio" value="first"/> 1 <br/>
<input type="radio" name="radio" value="second"/> 2 <br/>
</form>


<script>
$(document).ready(function () {
    $('#myForm').on('click', function () {
        var value = $("[name=radio]:checked").val();

        alert(value);
    })
});
</script>
saroj
quelle
3

Versuche dies

var isChecked = $("#radio_1")[0].checked;
user2190046
quelle
3
function rbcitiSelction(e) {
     debugger
    $('#trpersonalemail').hide();
    $('#trcitiemail').show();
}

function rbpersSelction(e) {
    var personalEmail = $(e).val();
    $('#trpersonalemail').show();
    $('#trcitiemail').hide();
}

$(function() {  
    $("#citiEmail").prop("checked", true)
});
MadhaviLatha Bathini
quelle
2
$("#radio_1").attr('checked', true);
//or
$("#radio_1").attr('checked', 'checked');
dominicbri7
quelle
2
$("#radio_1").attr('checked', true);das wird nicht funktionieren. Wie vom OP erwähnt
JohnP
2
Bitte erläutern Sie den Code in Ihren Antworten und lesen Sie die Frage (dies wurde versucht)
SomeKittens
2

Ich habe ein ähnliches Beispiel zur Verbesserung erhalten. Wie wäre es, wenn ich eine neue Bedingung hinzufügen möchte, z. B. wenn das Farbschema ausgeblendet werden soll, nachdem ich auf den Projektstatuswert mit Ausnahme von Fertigern und Pflastersteinen geklickt habe.

Beispiel ist hier:

$(function () {
    $('#CostAnalysis input[type=radio]').click(function () {
        var value = $(this).val();

        if (value == "Supply & Lay") {
            $('#ul-suplay').empty();
            $('#ul-suplay').append('<fieldset data-role="controlgroup"> \

http://jsfiddle.net/m7hg2p94/4/

Azim Hamdan
quelle
2

Außerdem können Sie überprüfen, ob das Element aktiviert ist oder nicht:

if ($('.myCheckbox').attr('checked'))
{
   //do others stuff
}
else
{
   //do others stuff
}

Sie können nach nicht aktivierten Elementen suchen:

$('.myCheckbox').attr('checked',true) //Standards way

Sie können diese Option auch deaktivieren:

$('.myCheckbox').removeAttr('checked')

Sie können nach Optionsfeldern suchen:

Verwenden Sie für Versionen von jQuery gleich oder höher (> =) 1.6:

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

Verwenden Sie für Versionen vor (<) 1.6:

$("#radio_1").attr('checked', 'checked');
Majedur Rahaman
quelle
2

Ich habe jquery-1.11.3.js verwendet

Grundlegendes Aktivieren und Deaktivieren

Tipps 1: (Optionsfeldtyp häufig Deaktivieren und aktivieren)

$("input[type=radio]").attr('disabled', false);
$("input[type=radio]").attr('disabled', true); 

Tipps 2: (ID-Auswahl mit prop () oder attr ())

$("#paytmradio").prop("checked", true);
$("#sbiradio").prop("checked", false);

jQuery("#paytmradio").attr('checked', 'checked'); // or true this won't work
jQuery("#sbiradio").attr('checked', false);

Tipps 3: (Klassenauswahl mit prop () oder arrt ())

$(".paytm").prop("checked", true);
$(".sbi").prop("checked", false);

jQuery(".paytm").attr('checked', 'checked'); // or true
jQuery(".sbi").attr('checked', false);

ANDERE TIPPS

$("#paytmradio").is(":checked")   // Checking is checked or not
$(':radio:not(:checked)').attr('disabled', true); // All not check radio button disabled

$('input[name=payment_type][value=1]').attr('checked', 'checked'); //input type via checked
 $("input:checked", "#paytmradio").val() // get the checked value

index.html

<div class="col-md-6">      
    <label class="control-label" for="paymenttype">Payment Type <span style="color:red">*</span></label>
    <div id="paymenttype" class="form-group" style="padding-top: inherit;">
        <label class="radio-inline" class="form-control"><input  type="radio" id="paytmradio"  class="paytm" name="paymenttype" value="1" onclick="document.getElementById('paymentFrm').action='paytmTest.php';">PayTM</label>
        <label class="radio-inline" class="form-control"><input  type="radio" id="sbiradio" class="sbi" name="paymenttype" value="2" onclick="document.getElementById('paymentFrm').action='sbiTest.php';">SBI ePAY</label>
    </div>
</div>
venkatskpi
quelle
2

Verwenden Sie prop () mehtod

Geben Sie hier die Bildbeschreibung ein

Quelle 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>
Code Spy
quelle
1

Versuche dies

 $("input:checked", "#radioButton").val()

Wenn aktiviert, wird zurückgegeben, True wenn nicht aktiviert, wird zurückgegebenFalse

jQuery v1.10.1
PST
quelle
1

Einige der oben genannten Lösungen funktionieren nicht, dann können Sie es unten versuchen:

jQuery.uniform.update(jQuery("#yourElementID").attr('checked',true));
jQuery.uniform.update(jQuery("#yourElementID").attr('checked',false));

Sie können es auch versuchen:

jQuery("input:radio[name=yourElementName]:nth(0)").attr('checked',true);
Pankaj Bhagwat
quelle
1
Uniform ist ein jQuery-Plugin, das Formulare schöner macht, dies jedoch durch Hinzufügen zusätzlicher Elemente. Immer wenn ich den geprüften Wert aktualisiere, wird der Status des zusätzlichen Elements nicht aktualisiert, was zu einer unsichtbaren Eingabe führt, die nicht geprüft wird, sondern ein sichtbares Hintergrundelement aufweist, das geprüft aussieht. jQuery.uniform.update()ist die Lösung!
Denilson Sá Maia
1

Versuche dies:

$(document).ready(function(){
  $("#Id").prop("checked", true).checkboxradio('refresh');
});
user3721473
quelle
Dies funktioniert nicht, ohne die Datei für das checkboxradioPlugin einzuschließen. Dies ist sinnlos, wenn Sie nur die integrierten Funktionen von jQuery verwenden können, um dies zu erreichen (siehe akzeptierte Antwort).
Nathan
1

Ich habe gerade ein ähnliches Problem, eine einfache Lösung besteht darin, einfach zu verwenden:

.click()

Jede andere Lösung funktioniert, wenn Sie das Radio nach dem Aufruf der Funktion aktualisieren.

user3148673
quelle
1
Anruf klicken ist manchmal Kopfschmerzen in ie9
Astolfo Hoscher
1

attr akzeptiert zwei Zeichenfolgen.

Der richtige Weg ist:

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