3

我正在尝试构建类似 wordpress 选项部分的内容。当您单击复选框时，您可以切换相应<input type="text">字段的显示，我想在一个函数中完成所有操作，因此我没有大量不同的功能，那么使用复选框切换相应输入的最佳方法是什么，我做了一个快速的jsFiddle，但是当我使用我的复选框时，它会切换所有输入，因为我显然选择了所有输入，所以使用likethis或其他东西切换相应字段会是一个更好的解决方案，在此先感谢，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();
        });
    });
4

4 回答 4

8

这应该有帮助

基本解决方案

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

小提琴

于 2013-03-29T05:32:12.923 回答
2

检查相应的属性name：

 $(document).ready(function(){
   $('input[type="checkbox"]').click(function(){
     var name = this.name; //<---------------------------this is faster
     $('.container').find('[name="'+name+'"]').toggle();
   });
});

小提琴

于 2013-03-29T05:30:56.093 回答
1

将类型和名称一起用于与相应的文本框进行映射，如下所示：

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

这是工作演示：http: //jsfiddle.net/G5tN7/

我希望，它会为你工作。

于 2013-03-29T05:31:31.853 回答
0

我向输入添加了值，然后使用值名称来分配类名称并使用它来切换输入。这是JS

$(document).ready(function(){
    $('input[type="checkbox"]').click(function(){
        var value = $(this).val();
        $('.' + value).toggle();
    });
});

这是 HTML

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

还有小提琴 http://jsfiddle.net/MEC9n/1/

于 2013-03-29T05:32:11.317 回答