wake-up-neo.com

Jquery Wenn das Optionsfeld markiert ist

Mögliches Duplizieren:
Die Prüfung eines bestimmten Optionsfelds ist markiert

Ich habe im Moment diese 2 Optionsfelder, damit der Benutzer entscheiden kann, ob er ein im Preis enthaltenes Porto benötigt oder nicht:

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

Ich muss Jquery verwenden, um zu prüfen, ob das Optionsfeld "Ja" aktiviert ist, und wenn dies der Fall ist, eine Anfügefunktion auszuführen. Könnte mir jemand sagen, wie ich das bitte machen würde?

Danke für jede Hilfe

bearbeiten:

Ich habe meinen Code dahingehend aktualisiert, aber er funktioniert nicht. Mache ich etwas falsch?

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

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

});

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

Oder, das obige - wieder - mit ein wenig less überflüssiger jQuery:

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

Überarbeitete (etwas verbesserte) jQuery:

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

JS Fiddle Demo .

Und ein leichtes Update (da ich gerade bearbeitet habe, um Snippets sowie die JS Fiddle - Links einzuschließen), um die <input />-Elemente mit <label>s zu umschließen - lassen Sie den entsprechenden Text anklicken, um den entsprechenden <input /> - zu aktualisieren Ändern der Mittel zum Erstellen des anzuhängenden Inhalts:

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>

JS Fiddle Demo .

Wenn Sie nur Inhalte anzeigen müssen, je nachdem, welches Element vom Benutzer geprüft wird, ist eine geringfügige Aktualisierung erforderlich, bei der die Sichtbarkeit mithilfe eines expliziten Ein-/Ausblenden geändert wird:

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

Und schließlich nur mit 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>

JS Fiddle Demo .

Verweise:

250
David Thomas

Versuche dies

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

Etwas wie das:

if($('#postageyes').is(':checked')) {
// do stuff
}
8
Mrchief
$('input:radio[name="postage"]').change(function(){
    if($(this).val() === 'Yes'){
       // append stuff
    }
});

Dadurch wird ein Änderungsereignis auf den Optionsfeldern überwacht. Wenn der Benutzer auf Yes klickt, wird das Ereignis ausgelöst und Sie können alles, was Sie möchten, an das DOM anhängen.

6
Shef
if($('#test2').is(':checked')) {
    $(this).append('stuff');
} 
5
Phil
$("input").bind('click', function(e){
   if ($(this).val() == 'Yes') {
        $("body").append('whatever');
   }
});
4
genesis

Versuche dies:

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

Dadurch wird das geänderte Ereignis abgehört. Ich habe die Antworten von anderen ausprobiert, aber diese funktionierten nicht für mich und schließlich funktionierte diese.

$('input:radio[name="postage"]').change(function(){
    if($(this).is(":checked")){
        alert("lksdahflk");
    }
});
0
M.S Shohan
jQuery('input[name="inputName"]:checked').val()
0
Benjamin