it-swarm.com.de

Wie prüfe ich ein Optionsfeld mit jQuery?

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

Hast du eine andere Idee? Was vermisse ich?

782
Alexis

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 anschließend click() oder change() über die Optionsschaltfläche anrufen. Siehe Kommentare für weitere Informationen.

1324
Mike Thomsen

Versuche dies.

In diesem Beispiel ziele ich mit dem Namen und Wert der Eingabe darauf ab

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

Gut zu wissen: Bei Mehrwortwerten funktioniert es auch aufgrund von Apostrophen.

216

Eine weitere Funktion prop (), die in jQuery 1.6 hinzugefügt wird, dient demselben Zweck.

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

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.

75
Karbaman

Versuche dies.

Um die Optionsschaltfläche mitValuezu überprüfen, verwenden Sie diese Option.

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

Um die Optionsschaltfläche mitIDzu überprüfen, verwenden Sie diese Option.

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

Oder

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

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

Versuche dies:

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

http://jsfiddle.net/nwo706xw/

9
user4457035

Du musst 

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

Das ist das HTML-Attribut

8
JohnP

Ja, es hat für mich wie eine Art funktioniert:

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

Wenn die Eigenschaft name nicht funktioniert, vergessen Sie nicht, dass id noch vorhanden ist. Diese Antwort richtet sich an Personen, die die id hier anvisieren möchten.

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

Weil die Eigenschaft name für mich nicht funktioniert. Stellen Sie sicher, dass Sie id und name nicht in doppelte/einfache Anführungszeichen setzen.

Prost!

5
Anjana Silva

Wir sollten sagen, dass es sich um eine radio-Schaltfläche handelt. Versuchen Sie es daher mit dem folgenden Code.

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

Für den Fall, dass jemand dies während der Verwendung der jQuery-Benutzeroberfläche versucht, 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
4
freeworlder
$("input[name=inputname]:radio").click(function() {
    if($(this).attr("value")=="yes") {
        $(".inputclassname").show();
    }
    if($(this).attr("value")=="no") {
        $(".inputclassname").hide();
    }
});
4
Eray

Versuche dies

var isChecked = $("#radio_1")[0].checked;
3
user2190046

Versuchen Sie dies mit einem Beispiel

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

Wert erhalten:

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

Eingestellter Wert: 

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

Optionsfeld klicken Sie auf Attr angehoben:

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

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
        }
    });
});
2
Jordan Jelinek

Ich habe einige verwandte Beispiele erhalten, die ich verbessern möchte. Wie wäre es, wenn ich eine neue Bedingung hinzufügen möchte, sagen wir, wenn das Farbschema ausgeblendet werden soll, nachdem ich auf Projektstatus geklickt habe, ausgenommen Pflastersteine ​​und Pflastersteine.

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/

2
azim hamdan

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>

2
volitilov
function rbcitiSelction(e) {
     debugger
    $('#trpersonalemail').hide();
    $('#trcitiemail').show();
}

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

$(function() {  
    $("#citiEmail").prop("checked", true)
});

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

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

Ein anderer Weg, den Sie ausprobieren können, ist:

jQuery("input:radio[name=yourElementName]:nth(0)").attr('checked',true);
1
Pankaj Bhagwat

Ich habe gerade ein ähnliches Problem, eine einfache Lösung ist einfach zu benutzen:

.click()

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

1
user3148673

versuche dies

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

wenn aktiviert, wird True zurückgegeben. Wenn nicht aktiviert, wird False zurückgegeben.

jQuery v1.10.1
1
pst

Ich habe jquery-1.11.3.js verwendet

Basic aktivieren & deaktivieren

Tipps 1: (Optionsfeldtyp allgemein Deaktivieren & 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>
0
venkatSkpi

Falls Sie für etwas so Einfaches keine große Bibliothek wie jQuery einbinden möchten, finden Sie hier eine alternative Lösung mit integrierten DOM-Methoden:

// Check checkbox by id:
document.querySelector('#radio_1').checked = true;

// Check checkbox by value:
document.querySelector('#type > [value="1"]').checked = true;

// If this is the only input with a value of 1 on the page, you can leave out the #type >
document.querySelector('[value="1"]').checked = true;
<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>
0

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

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

Sie können nach ungeprüften Elementen suchen:

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

Sie können die Markierung auch aufheben:

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

Sie können nach einem Optionsfeld 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');
0
Majedur Rahaman

attr akzeptiert zwei Zeichenfolgen.

Der richtige Weg ist:

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

Versuche dies:

$(document).ready(function(){
  $("#Id").prop("checked", true).checkboxradio('refresh');
});
0
user3721473
$("#radio_1").attr('checked', true);
//or
$("#radio_1").attr('checked', 'checked');
0
dominicbri7

Überraschenderweise ignoriert die populärste und akzeptierte Antwort das Auslösen eines geeigneten Ereignisses trotz der Kommentare. Stellen Sie sicher, dass Sie .change() aufrufen, andernfalls ignorieren alle Bindungen bei Änderung das Ereignis.

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

attr akzeptiert zwei Zeichenfolgen.

Der richtige Weg ist:

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