Einfügen eines Benutzersteuerelements nach dem Klicken auf ein Element in der Kontrollkästchenliste mit Jquery

Question

Wie zeige ich eine Benutzersteuerung, nachdem ich das Kontrollkästchen in einer Checkbox-Liste mit JQuery aktiviert habe.

Answer 1

Wo möchten Sie die Steuerung anzeigen?

Zuerst entscheiden, wo Sie es wollen zeigen

dann entscheiden, was Sie steuern

Danach zeigen wollen: für

$("#myCheckboxId").click(function(){ /* show the control */}); 

Answer 2

Diese enge sein sollte, was Sie suchen:

 $('#myCheckbox').click(function() { 
      if($(this).is(':checked')) { 
       $('#myControl').show(); 
      } else { 
       $('#myControl').hide(); 
      } 
     }); 

Das zeigt das Element mit ID myControl Wenn das Kontrollkästchen aktiviert ist, wird es ausgeblendet, nachdem es deaktiviert wurde.

Wenn Sie verkürzte Ausdrücke wie die ternäre Operator (ich bin unhealthily besessen), könnte man dies in Betracht ziehen:

 $('#myCheckbox').click(function() { 
      $(this).is(':checked') ? $('#myControl').show() : $('#myControl').hide(); 
     }); 

Answer 3

In bestimmten Situationen kann es vorteilhaft sein, anstatt ein bestehendes Formelement zeigt, , um die Elemente im laufenden Betrieb dem DOM hinzuzufügen. Dann können Sie eine jQuery live event binden, um ein solches Formular zu senden.

$(document).ready(function(){ 
    $("#myCheckbox").click(function(){ 
     $(this).html('<input class="newinput" id="thisinput" type="text" name="thisinput" value="" >'); 
     var update = $('<input name="submit" type="submit" class="update" value="update">'); 
     $(this).next().html(update); 
     return true; 
    }); 

    $(".update").live("click", function(){ 
    var thisinput = $("input#thisinput").val(); 
    var url = encodeURI('index.php?thisinput='+thisinput); 
    window.location = url; 
    return false; 
    }); 

}); 

In meinem obigen Beispiel habe ich .html() verwendet, um die Eingabeelemente einzufügen. Das überschreibt Ihre Checkbox. Möglicherweise möchten Sie eine andere DOM-Manipulation verwenden, z. B. append, next oder andere.

Es gibt viele verschiedene Möglichkeiten, das Formular unter Verwendung von ajax functions zu senden, und wenn die Elemente bereits vorhanden sind, aber versteckte Elemente sind, dann brauchen Sie nur show effect. Siehe hierzu tutorial on jQuery effects.