Jquery Jika tombol radio dicentang

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>

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

var appended = $('<div />').text("You're appendin'!");
appended.id = 'appended';
$('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/1.6.2/jquery.min.js"></script>
<input type="radio" id="postageyes" name="postage" value="Yes" />Yes
<input type="radio" id="postageno" name="postage" value="No" />No

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:

• CSS:
  • :checkedpemilih .
  • Penyeleksi Atribut CSS.
  • Saudara Umum ( ~) combinator .
• jQuery:
  • appendTo().
  • atribut-sama dengan pemilih .
  • change().
  • :checkedpemilih .
  • filter().
  • is().
  • :radiopemilih .
  • remove().
  • text().
  • toggle().
  • val().

Coba ini

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

Sesuatu seperti ini:

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

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

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

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

Coba ini:

if ( jQuery('#postageyes').is(':checked') ){ ... }

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

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");
    }
});