选中复选框时,jQuery切换输入

Question

我正在尝试构建类似wordpress选项的部分.单击复选框时可以切换相应<input type="text">字段的显示,我想在一个函数中执行此操作,因此我没有大量不同的函数,因此使用复选框切换相应输入的最佳方法是什么,我做了一个快速的jsFiddle,但当我使用我的复选框时,它切换所有输入,因为我明显选择了所有这些,所以什么是更好的解决方案使用like this或者什么来切换相应的字段,谢谢提前,http:/ /jsfiddle.net/MEC9n/

HTML

<div class="options">
    <input type="checkbox" name="title"><label>Title</label>
    <input type="checkbox" name="author"><label>Author</label>
    <input type="checkbox" name="category"><label>Category</label>
</div>
<div class="container">
    <form method="post">
        <input type="text" name="title" placeholder="Title:">
        <input type="text" name="author" placeholder="Author:">
        <input type="text" name="category" placeholder="Category:">
        <input type="submit" value="Submit">
    </form>
</div>

jQuery的

   $(document).ready(function(){
        $('input[type="checkbox"]').click(function(){
            $('input[type="text"]').toggle();
        });
    });

Answer 1

这应该有所帮助

基本解决方案

$(document).ready(function(){
    $('input[type="checkbox"]').click(function(){
        var item = $(this).attr('name');
        $('input[name="'+item+'"][type="text"]').toggle();
    });
});

小提琴

可能更好？

如果你真的想让它变得高效,那就扩展jQuery

$(document).ready(function () {
    jQuery.fn.rmCorrespondingText = function () {
        var context = $(this);
        context.bind('click', function () {
            var item = context.attr('name');
            $('input[name="' + item + '"][type="text"]').toggle();
        });
    };

    $('input[type="checkbox"]').rmCorrespondingText();
});

小提琴