Jquery Wenn das Optionsfeld aktiviert ist

149

Mögliches Duplizieren: Die
Überprüfung eines bestimmten Optionsfelds ist aktiviert

Ich habe momentan diese 2 Optionsfelder, damit der Benutzer entscheiden kann, ob er 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 überprüfen, ob das Optionsfeld "Ja" aktiviert ist, und wenn dies der Fall ist, eine Append-Funktion ausführen. Könnte mir bitte jemand sagen, wie ich das machen würde?

Vielen Dank für jede Hilfe

bearbeiten:

Ich habe meinen Code darauf aktualisiert, aber es 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>
Daniel H.
quelle
1
@ Daniel H: Bei deinem Update: Es funktioniert einwandfrei !
Shef
Das ist seltsam, es funktioniert einfach nicht auf meiner Website. Zumindest weiß ich, dass der Code richtig ist, ich werde versuchen herauszufinden, was daran falsch ist, danke für alle Antworten!
Daniel H

Antworten:

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

Oder das oben Gesagte - wieder - mit etwas weniger ü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 (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();
        }
    });

JS Fiddle Demo .

Und außerdem ein mildes Update (da ich es bearbeitet habe, um sowohl Snippets als auch die JS Fiddle-Links einzuschließen), um die <input />Elemente mit <label>s zu versehen - ermöglichen Sie das Klicken auf den Text, um das relevante zu aktualisieren <input />- und ändern Sie die Mittel zum Erstellen des Inhalt zum Anhängen:

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 überprüft wird, wird ein geringfügiges Update durchgeführt, mit dem die Sichtbarkeit mithilfe eines expliziten Ein- / Ausblendens umgeschaltet 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:

David sagt, Monica wieder einsetzen
quelle
3
Sie müssen nicht sehen, ob es aktiviert ist oder nicht. Andernfalls wird es niemals den Wert haben. Verschwendung von Ressourcen!
Shef
22

Versuche dies

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

Etwas wie das:

if($('#postageyes').is(':checked')) {
// do stuff
}
Mrchief
quelle
3
Das jQuery-Objekt ist immer wahr. Vielleicht möchten Sie $(...).lengthstattdessen verwenden.
Pimvdb
Du meinst #postageyes:checkedoder $('#postageyes').is(':checked')?
Shef
@pimvdb Gibt gemäß den jQuery-Dokumentenis() einen Booleschen Wert zurück. Der Anruf .length()ist also kaputt. Aus den Dokumenten: "Im Gegensatz zu anderen Filtermethoden erstellt .is () kein neues jQuery-Objekt. Stattdessen können Sie den Inhalt eines jQuery-Objekts ohne Änderung testen." - api.jquery.com/is
Asaph
7
$('input:radio[name="postage"]').change(function(){
    if($(this).val() === 'Yes'){
       // append stuff
    }
});

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

Shef
quelle
6
if($('#test2').is(':checked')) {
    $(this).append('stuff');
} 
Phil
quelle
4
$("input").bind('click', function(e){
   if ($(this).val() == 'Yes') {
        $("body").append('whatever');
   }
});
Genesis
quelle
Sie sind sich nicht sicher, geben aber nicht $("#postageyes:checked"immer true zurück? Müssten Sie das nicht verwenden, .lengthdamit es funktioniert?
Phil
entfernt "oder" und alles danach
Genesis
3

Versuche dies:

if ( jQuery('#postageyes').is(':checked') ){ ... }
Justin Ethier
quelle
0
jQuery('input[name="inputName"]:checked').val()
Benjamin
quelle
Während dieses Code-Snippet die Frage lösen kann, hilft eine Erklärung wirklich, die Qualität Ihres Beitrags zu verbessern. Denken Sie daran, dass Sie die Frage für Leser in Zukunft beantworten und diese Personen möglicherweise die Gründe für Ihren Codevorschlag nicht kennen.
Patrick Hund
Verstanden. Die nächste Antwort wird eine haben.
Benjamin
0

Dadurch wird das geänderte Ereignis abgehört. Ich habe die Antworten von anderen ausprobiert, aber diese haben bei mir nicht funktioniert und schließlich hat diese funktioniert.

$('input:radio[name="postage"]').change(function(){
    if($(this).is(":checked")){
        alert("lksdahflk");
    }
});
MS Shohan
quelle