Question

我不是很擅长jQuery，所以我有一个问题;有一种快速的编码方式，所以当你点击一个复选框（同样为1）时，下面会出现一个文本框。

我目前正在学习jQuery，所以这将是一个很好的例子。

提前致谢！

Answer 1

$("#yourCheckboxId").change(function(){
     if ($("#yourCheckboxId").is(":checked")){
         $("#yourTextBoxId").show();
     }
});

如果您想要在关闭复选框时隐藏文本框：

$("#yourCheckboxId").change(function(){
     if ($("#yourCheckboxId").is(":checked")){
         $("#yourTextBoxId").show();
     }
     else{
         $("#yourTextBoxId").hide();
     }
});

这假设您的ur html中有一个文本框，该文本框具有唯一的ID，并且最初也是隐藏的（“display：none”），并且您有一个最初可见的唯一ID的复选框

Answer 2

$('input:checkbox').change(function () {
    if ( $(this).is(':checked') && !$(this).next().is('textarea') ) {
        $(this).after( $('<textarea>') );
        // OR $('<textarea>').insertAfter(this);
    }
});

evan版本显示预先存在的版本，我创建它，你可以将它们结合起来;）

Answer 3

如果您希望完全动态地执行此操作，则需要使用2种方法。

.after ^docs
.remove ^docs

您可以确定是否已选中该复选框，如果是，则在其后添加文本框，或者是否取消选中该文本框并且文本框已存在，如果已删除，则将其删除。这归结为代码：

$('input[type=checkbox]').click(function(){
    if($(this).is(':checked')){
          var tb = $('<input type=text />');   
          $(this).after(tb)  ;
    }
    else if($(this).siblings('input[type=text]').length>0){
        $(this).siblings('input[type=text]').remove();
    }
})

实例：http://jsfiddle.net/KQ56P/

Answer 4

另一种方式（http://jsfiddle.net/3r6nb/）：

//html
<div>
     <input id="check" type="checkbox"/>
     <input id="text" type="text" class="hidden"/>
</div>

//css
.hidden
{
/*hides any element given this class, you may also want to set 
  display:none; as hidden elements still take up space*/
    visibility:hidden;
}
.visible
{
    visibility:visible;/*set display:inherit; if using display:none; above*/
}

//javascript
$("#check").change(function() {
    //toggleClass() removes the class from the element if it 
    //exists or adds it if it doesn't
    $("#text").toggleClass('hidden');
    $("#text").toggleClass('visible');
});

jQuery：点击复选框后，将显示下面的输入框

4 个答案: