Insert a user control after clicking an item in checkbox list using Jquery

Question

How do I show a usercontrol after clicking the check box in a checkbox list using JQuery.

Answer 1

Where do you want to show the control?

First decide where you want to show it

Then decide what control you want to show

After that:

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

Answer 2

This should be close to what you're looking for:

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

That will show the element with id myControl when the checkbox is checked, and hide it after it has been unchecked.

If you like shortened expressions using the ternary operator (I'm unhealthily obsessed), you might want to consider this:

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

Answer 3

In certain situations it may be preferable, rather than showing an existing form element, to add the elements on the fly to the DOM. Then you can bind a jQuery live event to submit such a form.

$(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 my example above, I used .html() to insert the input elements. That will overwrite your checkbox. You may wish to use a different DOM manipulation, such as append, next, or others.

There are many different ways to submit the form using ajax functions, and if the elements exist already but are hidden elements then all you'll need is a show effect. See this tutorial on jQuery effects.