890

Saya mencoba memeriksa tombol radio dengan jQuery. Ini kode saya:

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

Dan JavaScript:

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

Tidak bekerja:

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

Tidak bekerja:

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

Tidak bekerja:

Anda punya ide lain? Apa yang saya lewatkan?

— Alexis
sumber

1

Terima kasih atas tanggapan Anda! Saya menemukan masalahnya. Sebenarnya, dua cara pertama untuk melakukannya berhasil. Intinya adalah saya menggunakan jqueryUI untuk mengubah satu set 3 tombol radio menjadi satu set tombol dengan kode ini: jQuery ("# type"). Buttonset (); tetapi melakukan perubahan ini sebelum memeriksa radio adalah merusak set radio (tidak tahu mengapa). Akhirnya, saya melakukan panggilan buttonset setelah memeriksa radio dan berfungsi dengan sempurna.

— Alexis

Gunakan $ ("input: radio [value = '2']"). Prop ('dicentang', true); tautan di sini freakyjolly.com/...

— Code Spy

1469

Untuk versi jQuery yang sama atau lebih tinggi (> =) 1.6, gunakan:

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

Untuk versi sebelum (<) 1.6, gunakan:

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

Tip: Anda mungkin juga ingin memanggil click()atau change()tombol radio sesudahnya. Lihat komentar untuk info lebih lanjut.

— Mike Thomsen
sumber

80

Di jQuery 1.9 atau lebih tinggi solusi ini tidak akan berfungsi. Gunakan $ ("# radio_1"). Prop ("dicentang", true); sebagai gantinya.

— installero

12

@Ineroero sebenarnya, prepsudah benar sejak 1.6, dan diperlukan sejak 1.9.

— John Dvorak

43

Sangat membantu untuk menambahkan .change()hingga akhir untuk memicu peristiwa lain di halaman.

— Foxinni

13

Mungkin bijaksana untuk mengatur ulang jawaban ini sehingga .propjelas jawaban yang benar dan .attrmetode ini adalah catatan untuk jQuery <1.6.

— Patrick

22

Jika Anda ingin tombol radio lain dalam grup radio diperbarui dengan benar$("#radio_1").prop("checked", true).trigger("click");

— Paul LeBeau

256

Coba ini.

Dalam contoh ini, saya menargetkannya dengan nama dan nilainya input

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

Baik untuk diketahui: dalam hal nilai multi-kata, ini akan berfungsi karena apostrof juga.

— Vladimir Djuricic
sumber

5

Ini mungkin cara terbaik, yang lain memiliki kecenderungan untuk tetap membuat fungsi tidak berguna untuk kedua kalinya sementara ini berfungsi seperti yang diharapkan

— Roy Toledo

Mengetahui bahwa karena hanya ada satu yang dapat dipilih, $ ('input [name = "type"]: checked'). Val () juga bagus.

— huggie

Tolong, jelaskan. Gagasan umum adalah memeriksa tombol radio yang mengatasinya dengan atributnya - nama dan nilai opsional. Saya tidak yakin apa yang ingin Anda capai dengan ini, karena hanya ada atribut nama dan: selektor pseudo diperiksa digunakan. Dan Anda mengambil val juga, yang agak membingungkan. Terima kasih

— Vladimir Djuricic

2

Saya baru saja akan menambahkan "id" ke semua radio saya, tetapi metode ini bekerja dengan sempurna. Namun perlu diingat bahwa ketika nilai Anda multi-kata (katakanlah "warna ungu"), Anda harus menyertakan kutipan yang sesuai: $("input[name=background][value='color purple']").prop("checked",true);

— Tristan Tao

3

Jauh lebih baik daripada jawaban yang dipilih! Persis apa yang saya cari. Ini generik, sedangkan jawaban yang dipilih spesifik. Keren terima kasih.

— GarbageGigo

96

Satu lagi fungsi prop () yang ditambahkan di jQuery 1.6, yang memiliki tujuan yang sama.

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

— Umesh Patil
sumber

13

yang attr('checked', true)berhenti bekerja untuk saya dengan jQuery 1.9, ini adalah solusinya!

— Pascal

1

tampaknya itu prop("checked", true)berfungsi, attr('checked', 'checked')tidak

— Tomasz Kuter

@ ThomaszKuter Saya sarankan untuk menggunakan prop () karena properti DOM diperiksa adalah salah satu yang harus mempengaruhi perilaku - tetapi aneh - dalam biola ini ( jsfiddle.net/KRXeV ) attr('checked', 'checked')benar-benar berfungsi x)

— jave.web

berikut ini adalah disambiguasi yang baik stackoverflow.com/questions/5874652/prop-vs-attr

— code_monk

81

Opsi pendek dan mudah dibaca:

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

Ini mengembalikan benar atau salah, sehingga Anda dapat menggunakannya dalam pernyataan "jika".

— Karbaman
sumber

5

Terima kasih! Inilah yang saya cari, tapi (FYI) OP bertanya bagaimana cara mengatur tombol radio, tidak mendapatkan nilai. (Kata "cek" membuat pertanyaan membingungkan.)

— Bampfer

31

Coba ini.

Untuk memeriksa tombol Radio menggunakan Nilai, gunakan ini.

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

Atau

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

Atau

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

Untuk memeriksa tombol Radio menggunakan ID gunakan ini.

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

Atau

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

— Lakshmana Kumar
sumber

14

Coba ini:

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

http://jsfiddle.net/nwo706xw/

— pengguna4457035
sumber

Yang penting .val(['1'])tidak.val('1')

— Bob Stein

13

The $.propcara adalah lebih baik:

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

dan Anda dapat mengujinya seperti berikut:

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

9

Kamu harus melakukan

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

Itu atribut HTML

— JohnP
sumber

7

Jika properti nametidak berfungsi jangan lupa bahwa idmasih ada. Jawaban ini untuk orang yang ingin menargetkan di idsini bagaimana Anda melakukannya.

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

Karena properti nametidak berfungsi untuk saya. Pastikan Anda tidak mengelilingi iddanname dengan kutipan ganda / tunggal.

Bersulang!

— Anjana Silva
sumber

7

Ya, itu bekerja untuk saya seperti cara:

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

— Anjan Kant
sumber

6

Coba ini

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

6

Anehnya, jawaban yang paling populer dan diterima mengabaikan memicu acara yang tepat terlepas dari komentar tersebut. Pastikan Anda memohon .change() , jika tidak semua ikatan "saat perubahan" akan mengabaikan acara ini.

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

— apatsekin
sumber

5

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

— Keliru
sumber

5

Dapatkan nilai:

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

Tetapkan nilai:

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

Klik Tombol Radio tambahkan attr dicentang:

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

— Naim Serin
sumber

5

Kami ingin memberi tahu bahwa ini adalah radiotombol. Jadi silakan coba dengan kode berikut.

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

— UWU_SANDUN
sumber

5

Untuk berjaga-jaga jika ada orang yang mencoba untuk mencapai hal ini saat menggunakan jQuery UI, Anda juga perlu me-refresh objek kotak centang UI untuk mencerminkan nilai yang diperbarui:

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

— freeworlder
sumber

4

Saya menggunakan kode ini:

Saya minta maaf untuk bahasa Inggris.

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>

Luaskan cuplikan

— volitilov
sumber

4

Coba ini dengan contoh

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

3

Coba ini

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

— pengguna2190046
sumber

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
sumber

2

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

— dominicbri7
sumber

2

$("#radio_1").attr('checked', true);ini tidak akan berhasil. Seperti yang disebutkan oleh OP

— JohnP

2

Tolong jelaskan kode dalam jawaban Anda, dan baca pertanyaannya (ini telah dicoba)

— SomeKittens

2

Saya mendapatkan beberapa contoh terkait untuk ditingkatkan, bagaimana jika saya ingin menambahkan kondisi baru, katakanlah, jika saya ingin skema warna disembunyikan setelah saya mengklik nilai Status proyek kecuali Pavers dan Paving Slab.

Contohnya ada di sini:

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

2

Selain itu, Anda dapat memeriksa apakah elemen tersebut dicentang atau tidak:

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

Anda dapat memeriksa elemen yang tidak dicentang:

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

Anda juga dapat menghapus centang dengan cara ini:

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

Anda dapat memeriksa tombol radio:

Untuk versi jQuery yang sama atau lebih tinggi (> =) 1.6, gunakan:

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

Untuk versi sebelum (<) 1.6, gunakan:

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

— Majedur Rahaman
sumber

2

Saya menggunakan jquery-1.11.3.js

Basic Enable & disable

Tips 1: (Jenis tombol radio umum Nonaktifkan & Aktifkan)

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

Tips 2: (pemilih ID Menggunakan prop () atau 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);

Tips 3: (Pemilih kelas Menggunakan prop () atau arrt ())

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

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

TIPS LAINNYA

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

2

Gunakan prop () mehtod

Tautan Sumber

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

— Kode Mata-mata
sumber

1

coba ini

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

jika dicentang kembali True jika tidak dicentang kembaliFalse

jQuery v1.10.1

— pst
sumber

1

Beberapa kali solusi di atas tidak berfungsi, maka Anda dapat mencoba di bawah ini:

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

Cara lain yang dapat Anda coba adalah:

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

— Pankaj Bhagwat
sumber

1

Uniform adalah plugin jQuery yang membuat formulir lebih cantik, tetapi ia melakukannya dengan menambahkan elemen tambahan. Setiap kali saya memperbarui nilai yang dicentang, status elemen tambahan tidak diperbarui, mengarah ke input yang tidak terlihat yang tidak dicentang, tetapi dengan elemen latar belakang yang terlihat yang terlihat dicentang. jQuery.uniform.update()adalah solusinya!

— Denilson Sá Maia

1

Coba ini:

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

— pengguna3721473
sumber

Ini tidak akan berfungsi tanpa menyertakan file untuk checkboxradioplugin, yang tidak ada gunanya ketika Anda bisa menggunakan fungsi bawaan jQuery untuk menyelesaikannya (lihat jawaban yang diterima).

— Nathan

1

Saya baru saja mengalami masalah yang sama, solusi sederhana adalah dengan hanya menggunakan:

.click()

Solusi lain akan berfungsi jika Anda me-refresh radio setelah memanggil fungsi.

— pengguna3148673
sumber

1

panggilan klik kadang-kadang adalah sakit kepala di IE9

— Astolfo Hoscher

1

attr menerima dua string.

Cara yang benar adalah:

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

— Koko Monsef
sumber

Bagaimana cara memeriksa tombol radio dengan jQuery?

Saya menggunakan kode ini: