Question

如何使用JQuery单击复选框列表中的复选框后显示用户控件。

Answer 1

这应该接近你正在寻找的东西：

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

选中此复选框后，将显示ID为 myControl 的元素，并在取消选中后将其隐藏。

如果您喜欢使用三元运算符缩短表达式（我不太痴迷），您可能需要考虑这个：

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

Answer 2

在某些情况下，可能更愿意将动态元素添加到DOM中，而不是显示现有的表单元素。然后，您可以绑定jQuery live event以提交此类表单。

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

});

在上面的例子中，我使用.html（）来插入输入元素。这将覆盖您的复选框。您可能希望使用不同的DOM操作，例如append，next或其他。

使用ajax functions提交表单的方法有很多种，如果元素已经存在但是隐藏元素，那么您只需要show effect。请参阅此tutorial on jQuery effects。

Answer 3

你想在哪里展示控件？

首先决定你想要展示它的位置

然后决定要显示的控件

之后：

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

使用Jquery单击复选框列表中的项后插入用户控件

3 个答案: