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?

Alexis
źródło
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.

Mike Thomsen
źródło
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.

Vladimir Djuricic
źródło
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); 
Umesh Patil
źródło
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”.

Karbaman
źródło
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');
Lakshmana Kumar
źródło
14

Spróbuj tego:

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

http://jsfiddle.net/nwo706xw/

użytkownik4457035
źródło
Co ważne, .val(['1'])nie.val('1')
Bob Stein
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();
    });        
});
Amin Saqi
źródło
9

Musisz zrobić

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

To jest atrybut HTML

JohnP
źródło
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!

Anjana Silva
źródło
7

Tak, działało to dla mnie tak:

$("#radio_1").attr('checked', 'checked');
Anjan Kant
źródło
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
        }
    });
});
Jordan Jelinek
źródło
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();
apatsekin
źródło
5
$("input[name=inputname]:radio").click(function() {
    if($(this).attr("value")=="yes") {
        $(".inputclassname").show();
    }
    if($(this).attr("value")=="no") {
        $(".inputclassname").hide();
    }
});
Eray
źródło
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});
});
Naim Serin
źródło
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);
UWU_SANDUN
źródło
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
Freeworlder
źródło
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>

volitilov
źródło
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>
Saroj
źródło
3

Spróbuj tego

var isChecked = $("#radio_1")[0].checked;
użytkownik2190046
źródło
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
źródło
2
$("#radio_1").attr('checked', true);
//or
$("#radio_1").attr('checked', 'checked');
dominicbri7
źródło
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/

azim hamdan
źródło
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');
Majedur Rahaman
źródło
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>
venkatskpi
źródło
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>
Code Spy
źródło
1

Spróbuj tego

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

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

jQuery v1.10.1
pst
źródło
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);
Pankaj Bhagwat
źródło
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');
});
użytkownik3721473
źródło
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.

użytkownik3148673
źródło
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');
Koko Monsef
źródło