Jak sprawdzić przycisk opcji za pomocą jQuery?


889

Próbuję sprawdzić przycisk radiowy za pomocą jQuery. Oto mój kod:

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

I JavaScript:

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

Nie działa:

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

Nie działa:

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

Nie działa:

Czy masz inny pomysł? czego mi brakuje?


1
Dziękuję za odpowiedzi! Znalazłem problem. W rzeczywistości działają dwa pierwsze sposoby. Chodzi o to, że użyłem jqueryUI do przekształcenia zestawu 3 przycisków opcji w zestaw przycisków o tym kodzie: jQuery („# type”). Buttonset (); ale dokonanie tej zmiany przed sprawdzeniem radia spowodowało uszkodzenie zestawu radiowego (nie wiem dlaczego). Wreszcie po sprawdzeniu radia położyłem wywołanie zestawu przycisków i działa ono nienagannie.
Alexis

Użyj $ („input: radio [wartość = '2']”). Prop ('zaznaczone', prawda); link tutaj freakyjolly.com/…
Code Spy

Odpowiedzi:


1469

W przypadku wersji jQuery równych lub wyższych (> =) 1.6 użyj:

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

W przypadku wersji wcześniejszych niż (<) 1.6 użyj:

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

Wskazówka: możesz później zadzwonić click()lub change()nacisnąć przycisk radiowy. Zobacz komentarze, aby uzyskać więcej informacji.


80
W jQuery 1.9 lub nowszym to rozwiązanie nie będzie działać. Użyj $ („# radio_1”). Prop („zaznaczone”, prawda); zamiast.
installero

12
@Installero faktycznie prepjest poprawny od 1.6 i wymagany od 1.9.
John Dvorak

42
Pomocne jest dodanie .change()do końca, aby wywołać inne zdarzenia na stronie.
Foxinni,

13
Rozsądne może być ponowne ułożenie tej odpowiedzi, aby była .propto oczywiście poprawna odpowiedź, a .attrmetoda jest notatką dla jQuery <1.6.
Patrick

22
Jeśli chcesz, aby pozostałe przyciski w grupie radiowej aktualizowały się prawidłowo, użyj$("#radio_1").prop("checked", true).trigger("click");
Paul LeBeau

256

Spróbuj tego.

W tym przykładzie celuję w niego za pomocą jego nazwy wejściowej i wartości

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

Warto wiedzieć: w przypadku wartości wielu słów zadziała również z powodu apostrofów.


5
Jest to prawdopodobnie najlepszy sposób, inni mają tendencję do pozostawania tam, co sprawia, że ​​funkcja jest bezużyteczna po raz drugi, podczas gdy działa to zgodnie z oczekiwaniami
Roy Toledo

Okazało się, że ponieważ jest tylko jeden, który można wybrać, $ ('input [name = "type"]: selected'). Val () jest również przyjemny.
huggie

Proszę opracować. Ogólna idea polega na sprawdzeniu przycisku opcji adresującego go za pomocą jego atrybutów - nazwy i opcjonalnie wartości. Nie jestem pewien, co próbujesz osiągnąć, ponieważ istnieje tylko atrybut name i: zaznaczono pseudo selektor. I odzyskujesz również val, co jest dość mylące. Dzięki
Vladimir Djuricic,

2
Już miałem dodać „id” do wszystkich moich radiotelefonów, ale ta metoda działała bezbłędnie. Pamiętaj jednak, że jeśli twoja wartość jest wielowałowa (powiedz „kolor fioletowy”), musisz dołączyć odpowiednie cytaty: $("input[name=background][value='color purple']").prop("checked",true);
Tristan Tao

3
Znacznie lepiej niż wybrana odpowiedź! Dokładnie tego szukałem. Jest to ogólne, a wybrana odpowiedź jest konkretna. Wielkie dzieki.
GarbageGigo

96

Jeszcze jedna funkcja prop () dodana w jQuery 1.6, która służy temu samemu celowi.

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

13
attr('checked', true)przestał działać dla mnie z jQuery 1.9, to jest rozwiązanie!
Pascal

1
wydaje się, że prop("checked", true)działa, attr('checked', 'checked')nie działa
Tomasz Kuter

@TomaszKuter Polecam używać prop (), ponieważ sprawdzona właściwość DOM jest tą, która powinna wpływać na zachowanie - ale jest dziwne - w tym skrzypce ( jsfiddle.net/KRXeV ) attr('checked', 'checked')faktycznie działa x)
jave.web

tutaj jest dobre ujednoznacznienie stackoverflow.com/questions/5874652/prop-vs-attr
code_monk

81

Krótka i łatwa do odczytania opcja:

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

Zwraca wartość prawda lub fałsz, więc można go użyć w instrukcji „if”.


5
Dzięki! Tego właśnie szukałem, ale (FYI) OP pytał, jak ustawić przycisk opcji, a nie uzyskać wartość. (Słowo „czek” sprawiało, że pytanie było mylące.)
Bampfer

31

Spróbuj tego.

Aby zaznaczyć przycisk opcji radiowej za pomocą wartości, użyj tego.

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

Lub

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

Lub

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

Aby sprawdzić przycisk radiowy za pomocą identyfikatora, użyj tego.

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

Lub

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


13

$.propSposób jest lepszy:

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

i możesz to przetestować w następujący sposób:

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

9

Musisz zrobić

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

To jest atrybut HTML


7

Jeśli własność namenie działa, nie zapominaj, że idnadal istnieje. Ta odpowiedź jest dla osób, które chcą ukierunkować się na idto, co robisz.

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

Ponieważ własność namenie działa dla mnie. Upewnij się, że nie otaczasz idiname zawiera podwójne / pojedyncze cytaty.

Twoje zdrowie!



6

Spróbuj tego

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

6

Co zaskakujące, najpopularniejsza i akceptowana odpowiedź ignoruje wywołanie odpowiedniego zdarzenia pomimo komentarzy. Upewnij się, że wywołujesz .change() , w przeciwnym razie wszystkie powiązania „przy zmianie” zignorują to zdarzenie.

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

5
$("input[name=inputname]:radio").click(function() {
    if($(this).attr("value")=="yes") {
        $(".inputclassname").show();
    }
    if($(this).attr("value")=="no") {
        $(".inputclassname").hide();
    }
});

5

Uzyskaj wartość:

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

Ustalić wartość:

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

Kliknij przycisk opcji Dodaj sprawdzone attr:

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

5

Powinniśmy powiedzieć, że to przycisk, radiowięc spróbuj użyć następującego kodu.

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

5

Na wypadek, gdyby ktoś próbował to osiągnąć podczas korzystania z interfejsu użytkownika jQuery, należy również odświeżyć obiekt pola wyboru interfejsu użytkownika, aby odzwierciedlić zaktualizowaną wartość:

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

4

Używam tego kodu:

Przepraszam za angielski

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>


4

Spróbuj tego z przykładem

<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
function rbcitiSelction(e) {
     debugger
    $('#trpersonalemail').hide();
    $('#trcitiemail').show();
}

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

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

2
$("#radio_1").attr('checked', true);
//or
$("#radio_1").attr('checked', 'checked');

2
$("#radio_1").attr('checked', true);to nie zadziała. Jak wspomniano w OP
JohnP

2
Proszę wyjaśnić kod w swoich odpowiedziach i przeczytać pytanie (zostało to wypróbowane)
SomeKittens

2

Mam przykład pokrewnego przykładu do ulepszenia, co powiesz na to, czy chcę dodać nowy warunek, powiedzmy, jeśli chcę ukryć schemat kolorów po kliknięciu wartości projektu Status z wyjątkiem kostki brukowej i płyt chodnikowych.

Przykład znajduje się tutaj:

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

Ponadto możesz sprawdzić, czy element jest zaznaczony, czy nie:

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

Możesz sprawdzić, czy nie ma zaznaczonego elementu:

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

Możesz także odznaczyć w ten sposób:

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

Możesz sprawdzić przycisk opcji:

W przypadku wersji jQuery równych lub wyższych (> =) 1.6 użyj:

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

W przypadku wersji wcześniejszych niż (<) 1.6 użyj:

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

2

Użyłem jquery-1.11.3.js

Basic Włącz i wyłącz

Wskazówki 1: (Typ przycisku opcji często wyłącza i włącza)

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

Wskazówki 2: (Wybór identyfikatora za pomocą prop () lub 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);

Wskazówki 3: (Selektor klas za pomocą prop () lub arrt ())

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

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

INNE WSKAZÓWKI

$("#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>

2

Użyj prop () mehtod

wprowadź opis zdjęcia tutaj

Link źródłowy

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

1

Spróbuj tego

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

jeśli zaznaczone zwraca, True jeśli nie zaznaczone zwracaFalse

jQuery v1.10.1

1

Niektóre razy powyższe rozwiązania nie działają, możesz spróbować poniżej:

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

Innym sposobem możesz spróbować:

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

1
Uniform to wtyczka jQuery, która sprawia, że ​​formularze są ładniejsze, ale robi to poprzez dodanie dodatkowych elementów. Ilekroć aktualizuję sprawdzoną wartość, stan dodatkowego elementu nie jest aktualizowany, co prowadzi do niewidocznego wejścia, które nie jest sprawdzane, ale z widocznym elementem tła, który wygląda na sprawdzony. jQuery.uniform.update()jest rozwiązaniem!
Denilson Sá Maia,

1

Spróbuj tego:

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

Nie będzie to działać bez uwzględnienia pliku checkboxradiowtyczki, co nie ma sensu, gdy można po prostu użyć wbudowanych funkcji jQuery do osiągnięcia tego (patrz zaakceptowana odpowiedź).
Nathan

1

Mam właśnie podobny problem, prostym rozwiązaniem jest po prostu użycie:

.click()

Każde inne rozwiązanie będzie działać, jeśli odświeżysz radio po wywołaniu funkcji.


1
kliknięcie połączenia czasami powoduje ból głowy w
ie9

1

attr akceptuje dwa ciągi.

Prawidłowy sposób to:

jQuery("#radio_1").attr('checked', 'true');
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.