jquery toggle-div basiert auf radio-button-Auswahl

Habe ich ein radio button-group, die auf einer Umfrage form, deren html sieht wie folgt aus:

<label>Would you like to compete?</label>
      <input type="radio"  name="compete" value="2" id="competenoradio" >
      <label for="compete_no">No</label>
      <input type="radio" name="compete" value="1" id="competeyesradio">
      <label for="compete_yes">Yes</label>
      <div id="competeyes">
        <label class="competeyestxt" hidden=true>Which Location?</label>
        <textarea rows="4" cols="40" maxlength="2000" name="competeyestextarea" class="competeyestxt" hidden="true">
        </textarea>
      </div>

The div at the bottom with id 'competeyes' need to be toggled between invisible to visible
 based on whether the user selected radio button with id 'compete_yes'.

Hier ist mein Versuch, der nicht funktioniert.

Attempt 1:
$('#competeyesradio').bind('change',function(){
  $('#competeyes').toggle($(this).is(':checked'));
});


Attempt 2:

$('div.input input:radio').bind('change',function(){
   $('#competeyes').toggle($(this).is(':checked'));
});

Attempt 3:

$('[name=compete]').bind('change',function(){
  $('#competeyes').toggle($(this).is(':checked'));
 });

Irgendwelche Vorschläge?

InformationsquelleAutor truthSeekr | 2011-07-27

  1. 16

    Ihre erste problem ist, dass Sie mit $(this).is(':checked') um zu überprüfen, ob das aktuelle element markiert ist. Es wird immer wahr sein.

    $('input[name="compete"]').bind('change',function(){
    var showOrHide = ($(this).val() == 1) ? true : false;
    $('#competeyes').toggle(showOrHide);
 });

    Ihre zweite problem war, dass Sie mit hidden="true" für die Felder. Sie sollten mit Hilfe von CSS ausblenden der Felder. Hier ist das HTML-markup, die Sie verwenden sollten:

    <label>Would you like to compete?</label>

<input type="radio"  name="compete" value="2" id="competenoradio" >
<label for="compete_no">No</label>

<input type="radio" name="compete" value="1" id="competeyesradio">
<label for="compete_yes">Yes</label>

<div id="competeyes" style="display:none">
    <label class="competeyestxt">Which Location?</label>
    <textarea rows="4" cols="40" maxlength="2000" name="competeyestextarea" class="competeyestxt"></textarea>
</div>

    Hier ist ein demo

    Nur var showOrHide = $(this).val() == 1; ist auch in Ordnung.
    Das wird den trick tun, aber ich wollte nicht, dass der OP überrascht zu werden durch den code.
    Was ist $(this) in dem aktuellen Fall? Ich davon ausgegangen, dass in der Anweisung $('#competeyes').toggle($(this).is(':checked'));}); $(this) wäre #competeyes. Nein?
    beziehen sich auf die markierten radio-button, wenn No gewählt wird, wird der Wert 2. Allerdings, wenn ja gewählt wird, wird der Wert 1, das ist genau das was wir suchen mit ($(this).val() == 1) ? true : false;.

    InformationsquelleAutor Shef

  2. 2
    $('input[id=competeyesradio]:checked')(function(){ $('#competeyes').toggle();

    }

    Dies funktioniert nur beim laden. 🙂

    InformationsquelleAutor Vivek

  3. 1

    Könnten Sie etwas tun, was gefunden wird, hier 

    $('input:radio').bind('change',function(){
    $('#competeyes').toggle($(this).attr('id') == 'competeyesradio');
});

    InformationsquelleAutor Qtax

  4. 0
    $("#competenoradio[checked]")( 
    function() { 
      $('#competeyes').toggle();
    } 
);

    InformationsquelleAutor Badr Hari

  5. 0

    Warum sind Sie zu validieren es beim Umschalten nur funktioniert? Bei den meisten, erhalten Sie einen Rückruf. Sie sollten versuchen, diese:

    $('#competeyes').toggle();

    InformationsquelleAutor run

  6. -3

    Können Sie versuchen,diese eine, obwohl nicht eine Kostenlose Lösung.

    Offenlegung: ich bin der Entwickler.

    Quatsch-Antwort! Man, du bist nur versuchen, Fische für Kunden. Zwei, der Nutzer will, um TOGGLE-Elemente, basierend auf aktiviert radio-buttons nicht aktivieren/deaktivieren, wie Sie zur Verfügung gestellt haben. Drei, warum auf der Erde tun, die Sie KAUFEN möchten, ein plugin für etwas, das braucht nur ein paar Zeilen von einfachen code?!! Vier, wenn dieser link immer inaktiv wird, diese Antwort ist nutzlos.

    InformationsquelleAutor Abhisek

Schreibe einen Kommentar