klik tombol radio javascript jquery

90

Saya memiliki 2 tombol radio dan jquery yang sedang berjalan.

<input type="radio" name="lom" value="1" checked> first
<input type="radio" name="lom" value="2"> second

Sekarang, dengan sebuah tombol saya dapat mengatur onClick untuk menjalankan suatu fungsi. Bagaimana cara agar tombol radio menjalankan fungsi saat saya mengklik salah satunya?

javascript jquery

— David19801
sumber

4

Catatan. Sebaiknya elemen formulir tidak merespons klik, karena banyak orang menavigasi formulir menggunakan keyboard.

— superluminary

169

Anda dapat menggunakannya .changeuntuk apa yang Anda inginkan

$("input[@name='lom']").change(function(){
    // Do something interesting here
});

pada jQuery 1.3

Anda tidak lagi membutuhkan '@'. Cara yang benar untuk memilih adalah:

$("input[name='lom']")

— Peter Kelly
sumber

7

Perhatikan bahwa, pada jQuery 1.3, Anda tidak lagi membutuhkan '@'. Cara yang benar untuk memilih adalah:$("input[name='lom']")

— lubar

4

Apakah mungkin untuk mengintegrasikan solusi ini dengan solusi @JohnIdol di bawah ini dengan pernyataan bersyarat berdasarkan nilai radio? ex

$("input[name='lom']").change(function(){ if ($(this).val() === '1') {..... // rest conditional statements based on values here } ;

— LazerSharks

Pada jQuery 1.3, Anda tidak boleh menggunakan '@' dengan properti name. Jika Anda melakukannya, Anda akan mendapatkan jquery.self-0a6570c….js?body=1:1464 Uncaught Error: Syntax error, unrecognized expressionerror. Jadi ini bukan soal pilihan.

— scaryguy

53

Jika Anda memiliki radio dalam wadah dengan id = radioButtonContainerId Anda masih dapat menggunakan onClick dan kemudian periksa mana yang dipilih dan menjalankan beberapa fungsi:

$('#radioButtonContainerId input:radio').click(function() {
    if ($(this).val() === '1') {
      myFunction();
    } else if ($(this).val() === '2') {
      myOtherFunction();
    } 
  });

— JohnIdol
sumber

Terima kasih. Ini berhasil untuk saya, karena bidang saya adalah bagian dari larik dan saya tidak dapat menggunakan notasi input [name = 'xxx'] - <input type = "radio" name = "Need [measure_type]" id = "Need_measure_type" value = "aaa">

— perajin

Apakah ini bereaksi bahkan jika Anda menekan tab ke bawah dan memindahkan penanda dengan tombol panah?

— Alisso

ini tidak akan berfungsi di ponsel # pemilih tidak berfungsi di ponsel.

— zawhtut

19

<input type="radio" name="radio" value="creditcard" />
<input type="radio" name="radio" value="cash"/>
<input type="radio" name="radio" value="cheque"/>
<input type="radio" name="radio" value="instore"/>

$("input[name='radio']:checked").val()

— Bishoy Hanna
sumber

1

Meskipun jawaban ini tidak menunjukkan cara memasang kode ke acara tersebut, saya suka bahwa itu berisi info tentang cara mengambil nilai grup tombol radio.

— Manfred

1

$ ("input [@ name = 'lom']"). change (function () {// Lakukan sesuatu yang menarik di sini});

— Bishoy Hanna

11

ini seharusnya bagus

$(document).ready(function() {
    $('input:radio').change(function() {
       alert('ole');
    });
});

— Adam Lukaszczyk
sumber

Anda melewatkan a); di belakang.

— Biswas Khayargoli

8

Ada beberapa cara untuk melakukannya. Memiliki wadah di sekitar tombol radio sangat disarankan, tetapi Anda juga dapat meletakkan kelas langsung pada tombol. Dengan HTML ini:

<ul id="shapeList" class="radioList">
<li><label>Shape:</label></li>
<li><input id="shapeList_0" class="shapeButton" type="radio" value="Circular" name="shapeList" /><label for="shapeList_0">Circular</label></li>
<li><input id="shapeList_1" class="shapeButton" type="radio" value="Rectangular" name="shapeList" /><label for="shapeList_1">Rectangular</label></li>
</ul>

Anda dapat memilih berdasarkan kelas:

$(".shapeButton").click(SetShape);

atau pilih berdasarkan ID penampung:

$("#shapeList").click(SetShape);

Dalam kedua kasus tersebut, acara akan memicu klik baik tombol radio atau label untuk itu, meskipun anehnya dalam kasus terakhir (Memilih dengan "#shapeList"), mengklik label akan memicu fungsi klik dua kali karena beberapa alasan, di paling tidak di FireFox; memilih berdasarkan kelas tidak akan berhasil.

SetShape adalah sebuah fungsi, dan terlihat seperti ini:

function SetShape() {
    var Shape = $('.shapeButton:checked').val();
//dostuff
}

Dengan cara ini, Anda dapat memiliki label pada tombol Anda, dan dapat memiliki beberapa daftar tombol radio pada halaman yang sama yang melakukan hal berbeda. Anda bahkan dapat meminta setiap tombol dalam daftar yang sama melakukan hal yang berbeda dengan menyiapkan perilaku yang berbeda di SetShape () berdasarkan nilai tombol.

— ZeroK
sumber

3

sebaiknya batasi pencarian DOM. jadi lebih baik menggunakan induk juga, sehingga seluruh DOM tidak akan dilalui.

INI SANGAT CEPAT

<div id="radioBtnDiv">
  <input name="myButton" type="radio" class="radioClass" value="manual" checked="checked"/>
 <input name="myButton" type="radio" class="radioClass" value="auto" checked="checked"/>
</div>



 $("input[name='myButton']",$('#radioBtnDiv')).change(
    function(e)
    {
        // your stuffs go here
    });

— Vins
sumber