Jquery Jika tombol radio dicentang


149

Kemungkinan Gandakan:
Pemeriksaan tombol radio tertentu dicentang

Saya memiliki 2 tombol radio ini saat ini sehingga pengguna dapat memutuskan apakah mereka perlu ongkos kirim termasuk dalam harga atau tidak:

<input type="radio" id="postageyes" name="postage" value="Yes" /> Yes
<input type="radio" id="postageno" name="postage" value="No" /> No

Saya perlu menggunakan Jquery untuk memeriksa apakah tombol radio 'ya' dicentang, dan jika ya, lakukan fungsi append. Bisakah seseorang memberi tahu saya bagaimana saya akan melakukan ini?

Terima kasih atas bantuannya

edit:

Saya telah memperbarui kode saya untuk ini, tetapi tidak berfungsi. Apakah saya melakukan sesuatu yang salah?

<script type='text/javascript'>
// <![CDATA[
jQuery(document).ready(function(){

$('input:radio[name="postage"]').change(function(){
    if($(this).val() == 'Yes'){
       alert("test");
    }
});

});

// ]]>
</script>

1
@ Daniel H: Pada pembaruan Anda: itu berfungsi dengan baik !
Shef

Aneh, itu hanya tidak berfungsi di situs web saya. Setidaknya saya tahu kodenya benar, saya akan mencoba mencari apa yang salah dengannya, terima kasih atas semua jawabannya!
Daniel H

Jawaban:


284
$('input:radio[name="postage"]').change(
    function(){
        if ($(this).is(':checked') && $(this).val() == 'Yes') {
            // append goes here
        }
    });

Atau, yang di atas - lagi - menggunakan jQuery yang tidak terlalu berlebihan:

$('input:radio[name="postage"]').change(
    function(){
        if (this.checked && this.value == 'Yes') {
            // note that, as per comments, the 'changed'
            // <input> will *always* be checked, as the change
            // event only fires on checking an <input>, not
            // on un-checking it.
            // append goes here
        }
    });

JQuery yang direvisi (ditingkatkan-beberapa):

// defines a div element with the text "You're appendin'!"
// assigns that div to the variable 'appended'
var appended = $('<div />').text("You're appendin'!");

// assigns the 'id' of "appended" to the 'appended' element
appended.id = 'appended';

// 1. selects '<input type="radio" />' elements with the 'name' attribute of 'postage'
// 2. assigns the onChange/onchange event handler
$('input:radio[name="postage"]').change(
    function(){

        // checks that the clicked radio button is the one of value 'Yes'
        // the value of the element is the one that's checked (as noted by @shef in comments)
        if ($(this).val() == 'Yes') {

            // appends the 'appended' element to the 'body' tag
            $(appended).appendTo('body');
        }
        else {

            // if it's the 'No' button removes the 'appended' element.
            $(appended).remove();
        }
    });

Demo JS Fiddle .

Dan, lebih lanjut, pembaruan ringan (karena saya mengedit untuk menyertakan Cuplikan serta tautan JS Fiddle), untuk membungkus <input />elemen dengan <label>s - memungkinkan untuk mengklik teks untuk memperbarui yang relevan <input />- dan mengubah cara menciptakan konten yang akan ditambahkan:

var appended = $('<div />', {
  'id': 'appended',
  'text': 'Appended content'
});
$('input:radio[name="postage"]').change(function() {
  if ($(this).val() == 'Yes') {
    $(appended).appendTo('body');
  } else {
    $(appended).remove();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
  <input type="radio" id="postageyes" name="postage" value="Yes" />Yes</label>
<label>
  <input type="radio" id="postageno" name="postage" value="No" />No</label>

Demo JS Fiddle .

Juga, jika Anda hanya perlu menampilkan konten tergantung pada elemen mana yang diperiksa oleh pengguna, sedikit pembaruan yang akan mengubah visibilitas menggunakan tampilan / sembunyikan eksplisit:

// caching a reference to the dependant/conditional content:
var conditionalContent = $('#conditional'),
    // caching a reference to the group of inputs, since we're using that
    // same group twice:
    group = $('input[type=radio][name=postage]');

// binding the change event-handler:
group.change(function() {
  // toggling the visibility of the conditionalContent, which will
  // be shown if the assessment returns true and hidden otherwise:
  conditionalContent.toggle(group.filter(':checked').val() === 'Yes');
  // triggering the change event on the group, to appropriately show/hide
  // the conditionalContent on page-load/DOM-ready:
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
  <input type="radio" id="postageyes" name="postage" value="Yes" />Yes</label>
<label>
  <input type="radio" id="postageno" name="postage" value="No" />No</label>
<div id="conditional">
  <p>This should only show when the 'Yes' radio &lt;input&gt; element is checked.</p>
</div>

Dan, akhirnya, hanya menggunakan CSS:

/* setting the default of the conditionally-displayed content
to hidden: */
#conditional {
  display: none;
}

/* if the #postageyes element is checked then the general sibling of
that element, with the id of 'conditional', will be shown: */
#postageyes:checked ~ #conditional {
  display: block;
}
<!-- note that the <input> elements are now not wrapped in the <label> elements,
in order that the #conditional element is a (subsequent) sibling of the radio
<input> elements: -->
<input type="radio" id="postageyes" name="postage" value="Yes" />
<label for="postageyes">Yes</label>
<input type="radio" id="postageno" name="postage" value="No" />
<label for="postageno">No</label>
<div id="conditional">
  <p>This should only show when the 'Yes' radio &lt;input&gt; element is checked.</p>
</div>

Demo JS Fiddle .

Referensi:


3
Tidak perlu melihat apakah sudah dicentang atau tidak. Itu tidak akan pernah memiliki nilai sebaliknya. Buang-buang sumber daya!
Shef

22

Coba ini

if($("input:radio[name=postage]").is(":checked")){
  //Code to append goes here
}

12

Sesuatu seperti ini:

if($('#postageyes').is(':checked')) {
// do stuff
}

3
Objek jQuery selalu benar. Anda mungkin ingin menggunakannya $(...).length.
pimvdb

Maksudmu #postageyes:checkedatau $('#postageyes').is(':checked')?
Shef

@ pimvdb Menurut dokumen jQuery,is() mengembalikan boolean. Jadi panggilan .length()terputus. Dari dokumen: "Tidak seperti metode penyaringan lainnya, .is () tidak membuat objek jQuery baru. Sebaliknya, ini memungkinkan Anda untuk menguji konten objek jQuery tanpa modifikasi." - api.jquery.com/is
Asaph

7
$('input:radio[name="postage"]').change(function(){
    if($(this).val() === 'Yes'){
       // append stuff
    }
});

Ini akan mendengarkan acara perubahan pada tombol radio. Pada saat pengguna mengklik Yes, acara akan diaktifkan dan Anda akan dapat menambahkan apa pun yang Anda suka ke DOM.


6
if($('#test2').is(':checked')) {
    $(this).append('stuff');
} 

4
$("input").bind('click', function(e){
   if ($(this).val() == 'Yes') {
        $("body").append('whatever');
   }
});

Tidak terlalu yakin tentang ini, tetapi, tidak akan $("#postageyes:checked"selalu kembali benar? Tidakkah Anda harus menggunakannya .lengthagar bisa berfungsi?
Phil

dihapus "atau" dan semuanya setelah itu
genesis


0
jQuery('input[name="inputName"]:checked').val()

Sementara potongan kode ini dapat menyelesaikan pertanyaan, termasuk penjelasan sangat membantu untuk meningkatkan kualitas posting Anda. Ingatlah bahwa Anda menjawab pertanyaan untuk pembaca di masa depan, dan orang-orang itu mungkin tidak tahu alasan untuk saran kode Anda.
Patrick Hund

Mengerti. Jawaban selanjutnya akan memiliki satu.
Benjamin

0

Ini akan mendengarkan acara yang diubah. Saya sudah mencoba jawaban dari orang lain tetapi itu tidak berhasil untuk saya dan akhirnya, ini berhasil.

$('input:radio[name="postage"]').change(function(){
    if($(this).is(":checked")){
        alert("lksdahflk");
    }
});
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.